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

25 Apr, 2019
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.
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.<script>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 functioniniFrame();</script>Output:The page is in an iFrame
<script>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 functioniniFrame();</script>
Output:
The page is in an iFrame
Using window.top and window.self property: The top and self are both window objects, along with parent, so check if the current window is the top/main window.<script>  // Function to check whether webpage is in iFramefunction 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 in an iFrame");    }}  // Calling iniFrame functioniniFrame();</script>Output:The page is in an iFrame
<script>  // Function to check whether webpage is in iFramefunction 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 in an iFrame");    }}  // Calling iniFrame functioniniFrame();</script>
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.<script>function iniFrame() {          var 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 functioniniFrame();</script>Output:The page is in an iFrameIn 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.
<script>function iniFrame() {          var 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 functioniniFrame();</script>
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.
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript