This article example describes the method of the embedded iframe child page and the parent page js communication. Share it for your reference. The specific analysis is as follows:
The communication method between the page and the main page in the iframe framework is obviously different depending on whether the src attribute in the iframe is linked to the same domain or cross-domain link. Data exchange and DOM element mutual access in the same domain are much simpler, while cross-domain requires some clever ways to achieve communication.
1. Communication between father and son pages under the same domain
Parent page parent.html:
Copy the code as follows: <html>
<head>
<script type="text/javascript">
function says() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames["myFrame"].window.say();// only applies to ie browser
myFrame.window.say();
myFrame.window.document.getElementById("button").value="I changed";
}
</script>
</head>
<body>
<input type=button value="CallChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
Subpage child.html:
Copy the code as follows: <html>
<head>
<script type="text/javascript">
function says()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
}
</script>
</head>
<body>
<input id="button" type=button value="Calling the say() function in parent.html" onclick="callParent()">
</body>
</html>
Method call
As shown in the above example, the method of calling the child page of the parent page can be used by: FrameName.window.childMethod(); (This method is compatible with various browsers)
The method of the child page calling the parent page: parent.window.parentMethod();
DOM element access
After obtaining the child window object according to FrameName.window, accessing the DOM element is no different from accessing the DOM element in the same page. You can copy the code as follows: document.getElementById(), document.getElementsByName()[index] For example, copy the code as follows: parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button") windows can be omitted.
Things to note
To ensure that the operation is performed after the Iframe is loaded, if the Iframe is not loaded, it will undoubtedly cause an error. There are two ways to determine whether the Iframe has been loaded:
1. Use the onload event on Iframe;
2. Use document.readyState=="complete" to judge
2. Cross-domain parent-son page communication method
If the iframe links an external page, the communication method under the same domain name cannot be used because of the security mechanism.
Parent page passes data to child pages
The implementation technique is to use the hash value of the location object and pass communication data through it. We only need to add an additional #data string after the src of the iframe (data is the data you want to pass), and then obtain the data in a certain way in the child page. In fact, a common method is:
1. Set the timer in the subpage by using the setInterval method to listen to the changes in location.href to obtain the above data information
2. Then the subpage can perform corresponding logical processing based on this data information.
The child page passes data to the parent page
The implementation technique 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 pass the data of the child page to iframeC through it using the implementation principle of the first communication method above. 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 easier to pass data between them, which is a communication problem under the same domain name. As discussed earlier, here you can use a frequently used property window.top (can also use window.parent.parent), which returns a reference to the top-level window object loaded into the browser, so that we can directly use the method in the parent page.
I hope this article will be helpful to everyone's JavaScript programming.