Open In App

How to check a webpage is loaded inside an iframe or into the browser window using JavaScript?

Improve
Improve
Like Article
Like
Save
Share
Report

An iFrame is a rectangular frame or region in the webpage to load or display another separate webpage or document inside it. So basically, an iFrame is used to display a webpage within a webpage. You can see more about iFrames here : HTML iFrames There may be a variety of reasons for checking whether a webpage is loaded in an iFrame, for example, in cases where we need to dynamically adjust the height or width of an element.

These are the following methods:

Comparing the object’s location with the window object’s parent location

Here, we simply compare the object’s location with the window object’s parent location. If the result is true, then the webpage is in an iFrame. If it is false, then it is not in an iFrame. 

Example: In this example, we are using window object’s parent location.

javascript




function iniFrame() {
    if (window.location !== window.parent.location) {
        // The page is in an iFrames
        document.write("The page is in an iFrame");
    }
    else {
        // The page is not in an iFrame
        document.write("The page is not in an iFrame");
    }
}
 
// Calling iniFrame function
iniFrame();


Output:

The page is in an iFrame

Using window.top and window.self property

The top and self are both window objects, along with a parent, so check if the current window is the top/main window. 

Example: In this example, we are using windows.top and windows.self property.

javascript




// Function to check whether webpage is in iFrame
function iniFrame() {
 
    if (window.self !== window.top) {
        // !== operator checks whether the operands
        // are of not equal value or not equal type
        document.write("The page is in an iFrame");
    }
    else {
        document.write("The page is not in an iFrame");
    }
}
 
// Calling iniFrame function
iniFrame();


Output:

The page is in an iFrame

Using the window.frameElement property

Note that this only supports webpages belonging to the same origin as the main page in which it is embedded. The function window.frameElement returns the element (like iframe and object) in which the webpage is embedded. 

Example: In this example, we are using windows.frame property.

javascript




function iniFrame() {
 
    let gfg = window.frameElement;
 
    // Checking if webpage is embedded
    if (gfg) {
        // The page is in an iFrame
        document.write("The page is in an iFrame");
    }
    else {
        // The page is not in an iFrame
        document.write("The page is not in an iFrame");
    }
}
 
// Calling iniFrame function
iniFrame();


Output:

The page is in an iFrame

In the above code, store the element in which the webpage is embedded to the variable gfg. If the window isn’t embedded into another document, or if the document into which it’s embedded has a different origin (such as having been located from a different domain), gfg is null.



Last Updated : 18 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads