How to identify if a webpage is being loaded inside an iframe or directly load?

In web development, if you need to determine whether the current page is loaded within an iframe or directly in the browser window, you can use JavaScript to make this check. Here are two common methods:

1. Using the self and top Properties of the window Object

The window object in JavaScript has two special properties: self and top. window.self returns a reference to the current window, while window.top returns a reference to the topmost window (including nested iframes). If a page is loaded directly in the browser window, window.self and window.top should be identical. If the page is loaded within an iframe, window.self will be the window object of the iframe, while window.top will be the topmost window object (including nested iframes). Therefore, we can determine this by comparing whether these two properties are equal:

javascript
if (window.self === window.top) {
  // The page is not loaded within an iframe; it is loaded directly in the browser window.
  console.log("The page is loaded directly in the browser window.");
} else {
  // The page is loaded within an iframe.
  console.log("The page is loaded within an iframe.");
}

2. Using the parent Property of the window Object

Another method is to compare window.parent and window.self. window.parent returns the parent window object of the current window. If the current window has no parent window, the parent property returns itself (i.e., window.self). We can determine this as follows:

javascript
if (window.parent === window.self) {
  // The page is not loaded within an iframe; it is loaded directly in the browser window.
  console.log("The page is loaded directly in the browser window.");
} else {
  // The page is loaded within an iframe.
  console.log("The page is loaded within an iframe.");
}

Example Use Cases

A practical use case is when JavaScript scripts on a webpage need to adjust their behavior based on whether the page is loaded within an iframe. For example, if a page is loaded within an iframe, it might not display certain elements or adjust the layout; or for security reasons, it might restrict certain operations from being loaded within an iframe. By using the above methods, developers can add conditional logic to scripts to adjust the page's display or functionality based on this logic.

To determine whether a web page is loaded within an iframe or directly in the browser window, check if the window object and the top object are identical. The window object represents the current window, while the top object represents the top-level window. If a web page is loaded within an iframe, its window object will differ from the top object, as top refers to the outermost window containing the iframe. Conversely, if the web page is loaded directly in the browser window, the window object will be identical to the top object.

Here is a simple JavaScript example to detect whether a web page is loaded within an iframe:

javascript
if (window === top) {
  console.log("The page is loaded directly in the browser window.");
} else {
  console.log("The page is loaded within an iframe.");
}

When this code runs, if the web page is loaded directly in the browser window, window === top evaluates to true and prints the corresponding message. If the web page is loaded within an iframe, the condition evaluates to false and prints a different message.

For example, consider a project I previously worked on: developing a third-party comment component that clients can embed into their web pages, typically via an iframe. We needed to determine within the component whether it was embedded in an iframe or opened directly in the browser, allowing us to adjust the layout and functionality accordingly. We used the above method for detection and adjusted the component's responsive design accordingly.

When the page is loaded within an iframe that shares the same origin as the parent frame, this method returns the embedded window's window.frameElement element (e.g., iframe or object). Otherwise, if browsing in the top-level context or if the parent and child frames have different origins, it evaluates to null.

javascript
window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

This is an HTML standard, and all modern browsers provide basic support.

Note: Due to the same-origin policy, browsers may block access. IE bugs may also occur.

Here is the working code:

javascript
function inIframe() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

Both top and self are window objects (along with parent), so you can check if your window is the top-level window.