JS's iframe

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
Firefox:iframeElement.contentWindow
Ie6: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)

Chrome:iframeElement.contentDocument
Firefox:iframeElement.contentDocument
Ie:element.contentWindow.document
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
Precautions:
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
Add:
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