Summary of how JS operates on pages inside and outside Iframe

Get the content of the iframe outside the iframe

Method 1

Through the two APIs contentWindow and contentDocument:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var idocument = iframe.contentDocument;
console.log("window",iwindow); //Get the window object of iframe console.log("document",idoc); //Get the document of iframe
console.log("html",idoc.documentElement);//Get the html of the iframe

Among them, iframe.contentWindow can get the window object of iframe, and iframe.contentDocument can get the document object of iframe.

Method 2

Combined with the Name attribute, get it through the frames provided by the window:

<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr2'].window);
    console.dir(document.getElementById("iframe").contentWindow);
</script>

Get content outside the iframe within the iframe

window.parent gets the window object of the previous level. If it is still an iframe, it is the window object of the iframe.
window.top gets the window object of the top-level container, that is, the document of the page you opened

Calling methods and variables defined in the parent page in the iframe

window.parent.window.parentMethod();
window.parent.window.parentValue;

Methods and variables for operating iframe child pages in the parent page

window.frames["iframe_Name"].window.childMethod();
window.frames["iframe_Name"].window.childValue;

Summarize

There are two more points to note when using Iframe:

1. Make sure to perform operations after the iframe has loaded. If you call methods or variables inside the iframe before it has loaded, an error will occur.
2. If the iframe links to an external page, the security mechanism cannot use the communication method under the same domain name;

Determine if iframe loading is complete

iframe.onload = function() {
    //TODO
}

Different domain communication

Passing data from parent page to child page

Use the hash value of the location object to pass communication data through it. Add a data string after the src of the iframe in the parent page, and then get the data here instantly in some way in the child page.

Subpage passes data to parent page

A proxy iframe is used, which is embedded in the child page and must be in the same domain as the parent page. Then, the implementation principle of the same-domain communication method mentioned above is fully utilized to pass the data of the child page to the proxy iframe. Then, since the proxy iframe and the main page are in the same domain, the main page can obtain these data using the same domain method.

This is the end of this article about how JS can operate on pages inside and outside the Iframe. For more relevant content about JS operating on Iframe pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!