HTML DOM Frame Object: Accessing and Manipulating Frame Elements

The HTML DOM frame object provides a way to access and manipulate HTML frame elements, including both <frame> and <iframe> elements, using JavaScript. Although the <frame> tag itself is outdated and largely replaced by <iframe>, the DOM still treats both as similar frame elements. This article focuses on using the DOM to interact with <iframe> elements, which are commonly used for embedding external web pages or content within a webpage.

Understanding HTML Frames

Frames, particularly <iframe> elements, allow embedding another HTML document within the current document. This feature is vital for creating modular web applications and incorporating content from external sources. The DOM provides several properties and methods to control these embedded frames.

The <iframe> Element

The <iframe> element is used to embed another HTML document within the current document. Unlike the older <frame> element, the <iframe> is more flexible and compatible with modern web standards.

<iframe id="myFrame" src="https://example.com" width="600" height="400" style="border:1px solid black;"></iframe>

Key attributes of the <iframe> element:

Attribute Type Description
`id` String A unique identifier for the frame element, used to access it via JavaScript.
`src` String The URL of the document to be embedded in the frame.
`width` Number/String The width of the frame in pixels or a relative unit like %.
`height` Number/String The height of the frame in pixels or a relative unit like %.
`name` String A name for the frame, used when targeting the frame with links or forms.
`frameborder` String Specifies whether or not to display a border around the frame. It has 1 (show) and 0 (hide) values.
`allowfullscreen` Boolean Indicates whether the iframe can be placed into full-screen mode.
`sandbox` String Specifies extra restrictions on the content that are applied to the iframes.
`srcdoc` String Specifies the HTML content of the page to show in the frame.

Accessing Frame Elements in the DOM

You can access frame elements using JavaScript, just like any other HTML element, using document.getElementById() or other DOM selection methods.

const frameElement = document.getElementById('myFrame');

Key Properties and Methods of the Frame Object

Once you have a reference to the frame element, you can access its properties and methods.

Property/Method Type Description
`contentDocument` Object Returns the Document object of the embedded HTML document within the frame.
`contentWindow` Object Returns the Window object of the embedded HTML document, which allows to access the frames window scope.
`src` String Gets or sets the URL of the document within the frame.
`name` String Gets or sets the name of the frame.
`width` String Gets or sets the width of the frame.
`height` String Gets or sets the height of the frame.
`onload` Function Specifies a function to run when the frame has finished loading.
`frameBorder` String Specifies the frame border, values can be “1” or “0”.
`allowFullscreen` Boolean Specifies whether to allow full screen mode.
`sandbox` String Specifies restrictions for the iframe.

Examples of Accessing and Manipulating Frames

Let’s go through several examples to illustrate how to interact with frame elements using JavaScript.

Example 1: Accessing the src Attribute

This example demonstrates how to get and set the src attribute of an <iframe>.

<iframe
  id="frameSrc"
  src="https://dummyimage.com/400x300/007bff/fff"
  width="400"
  height="300"
  style="border: 1px solid black;"
></iframe>
<br />
<button id="changeSrcBtn">Change Source</button>

<script>
  const frame_src = document.getElementById('frameSrc');
  const changeSrcButton = document.getElementById('changeSrcBtn');
  const originalSrc = frame_src.src;

  changeSrcButton.addEventListener('click', function () {
    if(frame_src.src === originalSrc) {
     frame_src.src = 'https://dummyimage.com/400x300/28a745/fff';
   } else {
    frame_src.src = originalSrc;
   }
  });
</script>

Explanation: This example demonstrates how to retrieve and update the src attribute of an <iframe>.

Example 2: Accessing the Frame’s Document Object

The contentDocument property allows you to access the DOM of the HTML document loaded within the <iframe>.

<iframe
  id="frameDoc"
  srcdoc="<h1>Hello from Iframe</h1><p id='framePara'>This is a paragraph inside iframe.</p>"
  width="300"
  height="200"
  style="border: 1px solid black;"
></iframe>
<br>
<button id="changeFrameTextBtn">Change Iframe Paragraph</button>

<script>
    const frame_doc = document.getElementById('frameDoc');
    const changeFrameTextBtn = document.getElementById('changeFrameTextBtn');

  changeFrameTextBtn.addEventListener('click', function () {
        const frameDoc = frame_doc.contentDocument;
        const framePara = frameDoc.getElementById('framePara');
        framePara.textContent = "Iframe Text Changed!";
    });
</script>

Explanation: This example shows how to access the inner content of an iframe and manipulate its elements using the contentDocument property.

Example 3: Accessing the Frame’s Window Object

The contentWindow property provides access to the window object of the embedded document, allowing for more comprehensive interaction.

<iframe
  id="frameWindow"
  srcdoc="

<script>
function alertFromIframe(){alert('Hello from Iframe Window')}
</script>"

  width="300"
  height="200"
  style="border: 1px solid black;"
></iframe>
<br>
<button id="callIframeAlert">Call Iframe Alert</button>

<script>
  const frame_window = document.getElementById('frameWindow');
  const callIframeAlertButton = document.getElementById('callIframeAlert');

  callIframeAlertButton.addEventListener('click', function () {
       frame_window.contentWindow.alertFromIframe();
    });
</script>

Explanation: This example demonstrates how to access and call functions defined within the iframe‘s window scope using contentWindow.

Example 4: Setting the Frame’s Dimensions

The width and height properties of an <iframe> can be programmatically set through the DOM.

<iframe
  id="frameResize"
  src="https://dummyimage.com/200x150/007bff/fff"
  width="200"
  height="150"
  style="border: 1px solid black;"
></iframe>
<br />
<button id="resizeFrameBtn">Resize Frame</button>

<script>
    const frame_resize = document.getElementById('frameResize');
  const resizeFrameButton = document.getElementById('resizeFrameBtn');
  let isLarge = false;

  resizeFrameButton.addEventListener('click', function () {
    if(isLarge) {
        frame_resize.width = 200;
        frame_resize.height = 150;
    } else {
        frame_resize.width = 400;
        frame_resize.height = 300;
    }
     isLarge = !isLarge;
  });
</script>

Explanation: This example demonstrates how to dynamically change the width and height of an <iframe> using JavaScript.

Best Practices

  • Security: When working with iframes, be mindful of the security implications of embedding content from other domains. Use the sandbox attribute to specify restrictions.
  • Error Handling: Ensure to handle cases where the frame’s content might not load properly or might be inaccessible due to cross-origin restrictions.
  • Performance: Be aware that embedding multiple iframes can impact performance. Load iframes only when necessary and use lazy loading techniques.

Conclusion

The HTML DOM frame object, particularly for <iframe> elements, provides powerful tools to embed and control external content within web pages. By leveraging properties such as contentDocument, contentWindow, src, width, and height, developers can create dynamic, modular web applications and enhance user experience. This guide has provided a thorough look at accessing and manipulating frame elements through the DOM, supported by clear examples. By mastering these techniques, you can unlock the full potential of iframes in your web development projects.