Method of communicating between embedded iframe subpage and parent page js_javascript skills

The example in this article describes the method of communicating between the embedded iframe subpage and the parent page js. Share it with everyone for your reference. The specific analysis is as follows:

The communication method between the page in the iframe frame and the main page depends on whether the src attribute in the iframe is a same-domain link or a cross-domain link. There are obviously different communication methods. Data exchange and mutual access of DOM elements in the same domain are simple. There are many, and cross-domain ones require some clever ways to achieve communication.

1. Communication between parent and child pages in the same domain

Parent page parent.html:

Copy code The code is as follows:

Child page child.html:

Copy code The code is as follows:

Method call

As shown in the example above, the parent page can call the child page through: FrameName.window.childMethod(); (This method is compatible with various browsers)
The child page calls the method of the parent page: parent.window.parentMethod();

DOM element access

After getting the child window object based on FrameName.window, accessing the DOM elements in it is no different from accessing the DOM elements in the same page. You can pass

Copy code The code is as follows:

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

For example:

Copy code The code is as follows:

parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button")

The windows can be omitted.

Notes

Be sure to operate after the Iframe is loaded. If you start calling methods or variables before the Iframe is loaded, errors will undoubtedly occur. There are two ways to determine whether the Iframe has been loaded:

1. Use onload event on Iframe;
2. Use document.readyState=="complete" to determine

2. Cross-domain parent-child page communication method

If the iframe links to an external page, the communication method under the same domain name cannot be used due to the security mechanism.

Parent page passes data to child page

The trick to achieve this is to use the hash value of the location object to pass communication data through it. We only need to add a #data string after the src of the iframe in the parent page (data is the data you want to pass), and then in the child page The data here can be obtained instantly through some method on the page. In fact, a commonly used method is:

1. Set the timer in the subpage through the setInterval method, and monitor the changes in location.href to obtain the above data information

2. Then the sub-page can perform corresponding logical processing based on this data information.

The child page passes data to the parent page

The trick for implementation is to use a proxy Iframe C, which is embedded in the child page and must remain in the same domain as the parent page. Then we can make full use of the implementation principle of the first communication method above to transfer the child page to The data is passed to iframeC. The next question is how to let iframeC pass the data to the main page A. Because iframeC and the main page are in the same domain, it becomes much simpler to transfer data between them. They belong to the same domain name. Communication problem, as discussed earlier, here you can use a commonly used property window.top (you can also use window.parent.parent), which returns a reference to the top-level window object loaded in the browser, In this way we can directly use the methods in the parent page.

I hope this article will be helpful to everyone’s JavaScript programming design.