Home > Developer > JavaScript
Embedded iframe subpage and parent page js communication method, embedded iframejs Communication
This article describes how to communicate with the parent page js on an embedded iframe subpage. Share it with you for your reference. The specific analysis is as follows:
The communication between pages and the home page in the iframe framework varies depending on whether the src attribute in the iframe is the same domain link or cross-domain link, data exchange in the same domain and DOM element mutual access are much simpler, while cross-domain communication requires some clever methods to achieve communication.
1. Communication between parent and child pages in the same domain
Parent page parent.html:
Copy codeThe Code is as follows: <Head>
<Script type = "text/javascript">
Function say (){
Alert ("parent.html ------> I'm at parent.html ");
}
Function callChild ()
{
// Document. frames ["myFrame"]. window. say (); // only applicable to IE browsers
MyFrame. window. say ();
Myframe.domainmetadata Doc ument. getElementById ("button"). value = "I changed ";
}
</Script>
</Head>
<Body>
<Input type = button value = "Call the function say () in child.html" onclick = "callChild ()">
<Iframe name = "myFrame" src = "child.html"> </iframe>
</Body>
</Html>
Child pages child.html:
Copy codeThe Code is as follows: <Head>
<Script type = "text/javascript">
Function say ()
{
Alert ("child.html ---> I'm at child.html ");
}
Function callParent (){
Parent. say ();
Parent.w.w.doc ument. getElementsByName ("myFrame") [0]. style. height = "100px ";
}
</Script>
</Head>
<Body>
<Input id = "button" type = button value = "Call the say () function" onclick = "callParent ()" In parent.html>
</Body>
</Html>
Method call
As shown in the above example, the parent page can call the sub-page through: FrameName. window. childMethod (); (this method is compatible with various browsers)
Child page: parent. window. parentMethod ();
DOM element access
After obtaining the sub-window object based on FrameName. window, accessing the DOM element in the sub-window object is no different from accessing the DOM element on the same page.Copy codeThe Code is as follows: document. getElementById (), document. getElementsByName () [index], for example:Copy codeThe Code is as follows: parent.w.mongodoc ument. getElementsByName ("myFrame") [0];
Myframe.domainmetadata Doc ument. getElementById ("button") can be omitted for Windows.
Notes
Make sure that the operation is performed after the Iframe is loaded. If the Iframe is not loaded yet, the method or variable in the call will be started, and errors will undoubtedly occur. There are two ways to determine whether Iframe has been loaded:
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, we only need to add a # data string (data is the data you want to transmit) after setting the src of iframe on the parent page ), then, you can obtain the data in the subpage in a certain way. In fact, a common method is:
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 sub-page can process the corresponding logic based on the data information.
The child page transmits data to the parent page
The trick is to use a proxy Iframe C, which is embedded into the Child page and must be in the same domain as the parent page, then we can pass the data on the sub-page to iframeC by making full use of the implementation principle of the first communication method. The next question is how to let iframeC transmit the data to page, because iframeC and the home page are in the same domain, it is much easier to transmit data between them. It is a communication problem with the same domain name, as discussed earlier, here, you can use a frequently used attribute window. top (you can also use window. parent. parent), it returns a reference to the top-level window object loaded into the browser, so that we can directly use the Chinese method of the parent page.
I hope this article will help you design javascript programs.
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
