Home > Developer > JavaScript
The communication between the iframe subpage and the parent page varies depending on whether the src attribute in the iframe is the same-domain or cross-domain link.
1. Communication between parent and child pages in the same domain
Parent page parent.html
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript">
Function say (){
Alert ("parent.html ");
}
Function callChild (){
MyFrame. window. say ();
Myframe.domainmetadata Doc ument. getElementById ("button"). value = "Call ended ";
}
</Script>
</Head>
<Body>
<Input id = "button" type = "button" value = "Call the function say ()" onclick = "callChild ()"/> In child.html
<Iframe name = "myFrame" src = "child.html"> </iframe>
</Body>
</Html>
Child page child.html
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript">
Function say (){
Alert ("child.html ");
}
Function callParent (){
Parent. say ();
Parent.w.w.doc ument. getElementById ("button"). value = "Call ended ";
}
</Script>
</Head>
<Body>
<Input id = "button" type = "button" value = "Call the say () function in parent.html" onclick = "callParent ()"/>
</Body>
</Html>
Method call
The parent page calls the sub-PAGE method: FrameName. window. childMethod ();
Child page call parent PAGE method: parent. window. parentMethod ();
DOM element access
You can access the DOM element after obtaining the temporary Doc ument object on the page.
Notes
Make sure that the operation is performed after the iframe is loaded. If the iframe is not loaded, an error occurs when calling the methods or variables. There are two ways to determine whether iframe is loaded successfully:
1. Use the onload event on iframe
2. Use document. readyState = "complete" to judge
Ii. Cross-origin parent-child page communication method
If the iframe is linked to an external page, the communication mode under the same domain name cannot be used because of the security mechanism.
The parent page transmits data to the Child page
The trick is to use the hash value of the location object to transmit communication data. Add a data string after the src of iframe on the parent page, and then obtain the data in the subpage in some way. For example:
1. Set the timer through the setInterval method on the subpage and listen for changes in location. href to obtain the above data information.
2. Then, the Child page performs logical processing based on the data information.
The child page transmits data to the parent page
The implementation technique is to use a proxy iframe, which is embedded into the Child page and must be in the same domain as the parent page, then, the sub-page data is transmitted to the proxy iframe Based on the implementation principle of the first communication mode. Then, because the proxy iframe and the home page are in the same domain, therefore, you can use the same domain to obtain the data on the home page. Use window. top or window. parent. parent to obtain the reference of the top-level window object in the browser.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
