JS's iframe

Source: Internet
Author: User

0. What is an iframe: The IFRAME element creates an inline frame (inline frame) that contains another document. 1. Window object that obtains the IFRAME: (There are cross-domain access restrictions)

Chrome:iframeelement. Contentwindow

function Getiframewindow (Element) {            return  Element.contentwindow;     // return  Element.contentwindow | | element.contentDocument.parentWindow;}
2. Obtain the Document object for the IFRAME: (There are cross-domain access restrictions)

Note: IE does not have a iframeelement.contentdocument attribute.

var function (Element) {    return  element.contentdocument | | element.contentWindow.document;};
3. The Window object in the IFRAME that gets the parent page: There are cross-domain access restrictions.

Parent page: window.parent
Top-level page: Window.top
Applies to all browsers

4. Communication of parent-child pages in the same domainParent page parent.html:
function  say () {            alert ( "parent.html");        }         function Callchild () {            myFrame.window.say ();            MyFrame.window.document.getElementById ("button"). Value= "Call end";        }     </script>
Sub-page child.html:
function  say () {            alert ( "child.html");        }         function callparent () {            parent.say ();            Parent.window.document.getElementById ("button"). Value= "Call end";        }     </script>
Method invocation

Parent page Calling Child page method:FrameName.window.childMethod ();

Child page Call Parent page method:parent.window.parentMethod ();

DOM element access

Once you get to the page's Window.document object, you can access the DOM element


To ensure that the IFRAME is loaded and then done, an error occurs if the IFRAME has not yet been loaded to begin invoking the inside method or variable. There are two ways to determine whether an IFRAME is loaded or not :

1. OnLoad event on IFrame


The onload event is available in non-IE browsers.

var ifr = document.createelement (' iframe '= ' http://www.b.com/index.php 'function  () {    alert (' loaded ');}; Document.body.appendChild (IFR);

In fact, IE provides the OnLoad event, but must be bound using attachevent.

var ifr = document.createelement (' iframe '= ' http://b.a.com/b.php '; if (ifr.attachevent) {    ifr.attachevent (' onload ',  function() {alert (' Loaded '  ) else  {    ifr.onload  function() {alert (' Loaded ');};} Document.body.appendChild (IFR);

2. Use document.readystate== "complete" to judge

Five, cross-Domain parent-Child page communication method

If the IFRAME is linked to an external page, the security mechanism cannot use the same domain as the communication mode.

1. Parent page passing data to child pages

The technique of implementation is to use the hash value of the Location object to pass the communication data through it. Add a data string to the parent page to set the IFRAME after SRC, and then in a sub-page, in some way can get the data here in real time, for example:

1. Set the timer through the SetInterval method in the sub-page, monitor the change of location.href to get the data information above

2. The sub-pages are then logically processed according to the data information

2. Child pages passing data to the parent page

The implementation technique is to use a proxy iframe, which is embedded in the sub-page, and the parent page must remain the same domain , and then through it to make full use of the first communication method above the implementation principle of the page to pass the data to the agent IFrame, Then, because the agent's IFrame and the main page are in the same domain, the main page can take advantage of the same domain to get the data. use Window.top or window.parent.parent to get a reference to the topmost window object of the browser.

JS's iframe

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.