HTML - Iframe Element (nested browsing context) (inline frame)

About

The iframe element permits to embed another HTML page in a page creating a new browsing context (ie a new environment is created for the loading of this page).

This new environment is nested (meaning that it's inside the environment of the page where the iframe appears) creating a hierarchy of environment (known also as browsing context).

Example

  • The Iframe will download the below HTML code
<iframe 
   src="https://datacadamia.com/_export/code/web/html/iframe?codeblock=1">
</iframe>
  • The page that will load the html page above
<p>Iframe !</p>
  • Output:

Usage

Third-party context

Iframe are used mostly to embed third-party content such as:

  • Embedded content shared from other sites, such as videos, maps, code samples, and social posts.
  • Widgets from external services such as payments, calendars, booking, and reservation functionality.
  • Widgets such as social buttons or anti-fraud services (that create less obvious iframes).

Syntax

Height

The default height is the default height of the html element which is 150px

Sandbox

You can sandbox an iframe.

<iframe  sandbox="allow-same-origin allow-forms allow-scripts allow-downloads"> </iframe>

Why is there a margin between the body and html element for the document inside the iframe

The padding of the first descendant phrasing element (such as p or pre but not div) are added to the HTML element in a iframe context.

Example:

<p style="padding:10px">A div with a padding that will be propagated to the HTML element</p>

Javascript

Get the content of an iframe as a document

iFrameElement.contentWindow.document
// Note that iframe.contentDocument == iframe.contentWindow.document

Get the parent document

let parentDocument = parent.document

Get the iframe element that renders the window

let iframeElement = window.frameElement;

Detect the code is running into an iframe

let isIframe = window.self !== window.top;
console.log(isIframe);

Detect the frame index in the stack

for (var i = 0; i < window.parent.frames.length; i++) {
    let currentFrame = window.parent.frames[i];
    if (currentFrame === window.self) {
        console.log(`This window is the frame at the index (${i}) in the stack`);
    }
}

Javascript Snippet

Set the height of the iframe to the height of its window after loading to avoid overflow

This demo updates the height of the iframe to the height of the internal window.

This example is just for demonstration purpose because you can also achieve the same with the height css attribute, namely.

height:auto;
window.addEventListener("load", function () {

    // Select the iframe element with the class webCode
    const webCodeIFrames = document.querySelectorAll("iframe.webcode-combo");

    // Set the height of the iframe to be the height of the internal iframe
    if (webCodeIFrames != null) {
        for (let i = 0; i < webCodeIFrames.length; i++) {
            const webCodeIFrame = webCodeIFrames[i];
            const height = webCodeIFrame.getAttribute('height');
            if (height == null) {
                let htmlIFrameElement = webCodeIFrame.contentWindow.document.querySelector("html");
                let calculatedHeight = htmlIFrameElement.offsetHeight;
                let defaultHtmlElementHeight = 150;
                if (calculatedHeight === defaultHtmlElementHeight) {
                    // body and not html because html has a default minimal height of 150
                    calculatedHeight = webCodeIFrame.contentWindow.document.querySelector("body").offsetHeight;
                    // After setting the height, there is a recalculation and the padding of a descendant phrasing content element
                    // may ends up in the html element. The below code corrects that
                    requestAnimationFrame(function() {
                        if (calculatedHeight !== htmlIFrameElement.offsetHeight) {
                            webCodeIFrame.height = htmlIFrameElement.offsetHeight;
                        }
                    });
                }
                webCodeIFrame.height = calculatedHeight;
            }
        }
    }


});

Documentation / Reference





Discover More
A [[https://combostrap.com/frontmatter|frontmatter]] title shown on the Search Engine Result Pages

A [[https://combostrap.com/frontmatter|frontmatter]] description shown on the Search Engine Result Pages
Firefox Console
Browser - Javascript - (Web) Console

shelldevtool interpret a single line of code at a time REPL and then interact with the page and execute JavaScript. You can add message to the console through Console logging. The console keep...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
CSS - Viewport (Reader's window)

The viewport is the viewing area on a screen media. It's then a property of media. The top media of a browser is the window (ie browser tab) As an iframe create a new window, you can set a new viewport...
Boxdim
CSS - Width property (of a box)

The width property specifies the width of boxes and it's calculation is defined by the box sizing property. HTMLCSS HTML width attributeHTMLimgiframe... If you want to set a width on a p element for...
CSS Object (or Replaced elements)

Object or replaced elements in CSS
DOM - Shadow DOM (Scoped DOM)

Shadow DOM provides a way for an element to own, render, and style a chunk of DOM that's separate from the rest of the page. It's not in the global DOM. This is a scope functionality iframe When the...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Browsing context

A browsing context is a navigational context (environment) in which HTML document are rendered to the user. Each browsing context has: its own variable its own cookie its own dom and eventually...
HTML - Document

An HTML document is a well-formed HTML string (ie that contains the html root element). web page The HTML textual representation can be stored: in a string in a file or in the body of an HTTP...



Share this page:
Follow us:
Task Runner