Communication between embedded iframe subpages and parent page js

Source: Internet
Author: User

Communication between embedded iframe subpages and parent page js

This article mainly introduces the method for communicating embedded iframe subpages with parent page js. Examples show common techniques for communicating embedded iframe subpages with parent page js, which is of great practical value, for more information, see

 

 

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:

The Code is as follows:

<Html>
<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:

The Code is as follows:

<Html>
<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.

The Code is as follows:

Document. getElementById (), document. getElementsByName () [index]

For example:

The Code is as follows:

Parent.w.w.doc ument. getElementsByName ("myFrame") [0];
Myframe.domainmetadata Doc ument. getElementById ("button ")

Windows can be omitted.

 

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.

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.