The IFRAME child page communicates with the parent page depending on whether the SRC attribute in the IFRAME is linked by domain or cross-domain, and the mode of communication is different.
I. Communication of parent-child pages under the same domain
Parent page parent.html
Copy Code code as follows:
<script type= "Text/javascript" >
function say () {
Alert ("parent.html");
}
function Callchild () {
MyFrame.window.say ();
MyFrame.window.document.getElementById ("button"). Value= "Call End";
}
</script>
<body>
<input id= "button" type= button "value=" calls functions in child.html say () "onclick=" Callchild () "/>
<iframe name= "MyFrame" src= "child.html" ></iframe>
</body>
Sub-page child.html
Copy Code code as follows:
<script type= "Text/javascript" >
function say () {
Alert ("child.html");
}
function Callparent () {
Parent.say ();
Parent.window.document.getElementById ("button"). Value= "Call End";
}
</script>
<body>
<input id= "button" type= "button" value= "calls parent.html () function" say "onclick= () callparent
</body>
Method calls
The parent page calls the child page method: FrameName.window.childMethod ();
The child page calls the parent page method: Parent.window.parentMethod ();
DOM element access
When you get to the page's Window.document object, you can access the DOM element
Attention matters
To ensure that the IFRAME is completed after the completion of the operation, if the IFRAME has not been loaded to start calling the inside of the method or variable, will produce an error. There are two ways to determine whether an IFRAME is loaded or completed:
1. On the IFRAME with the onload incident
2. Use document.readystate== "complete" to judge
cross-Domain parent-child page communication methods
If the IFRAME is linked to an external page, you cannot use the same domain name for the security mechanism.
Parent page passes data to a child page
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 after the parent page set up the IFRAME with SRC, and then in a child page in some way can instantly get to the data here can be, for example:
1. In the child page through the SetInterval method to set the timer, monitor the change of the location.href can get the above data information
2. Then the sub-page based on this data information for the corresponding logical processing
Child pages pass data to the parent page
The implementation technique is to use an agent iframe, it is embedded in the child page, and the parent page must remain the same domain, and then through its full use of the first of the above communication method of the implementation of the data passed to the proxy iframe, and then because the agent of the IFrame and the main page is the same domain, So 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 in the browser.
