The communication between the iframe child page and the parent page is different depending on whether the src attribute in the iframe is a same-domain link or a cross-domain link.
1. Communication between parent and child pages under the same domain
Parent page parent.html
<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="Call end";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
child page child.html
<html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
}
function callParent(){
parent.say();
parent.window.document.getElementById("button").value="Call end";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>
method call
The parent page calls the child page method: FrameName.window.childMethod();
The child page calls the parent page method: parent.window.parentMethod();
DOM element access
After getting the window.document object of the page, you can access the DOM elements
Precautions
Make sure that the operation is performed after the iframe is loaded. If the method or variable in the iframe is not loaded before it is loaded, an error will occur. There are two ways to judge whether the iframe is loaded or not:
1. Use onload event on iframe
2. Use document.readyState=="complete" to judge
Two, 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 because of the security mechanism.
Passing data from parent page to child page
The trick is to use the hash value of the location object to pass communication data through it. Add a data string after the src of the iframe set on the parent page, and then you can get the data here in the child page in some way, for example:
1. Set the timer through the setInterval method in the sub page, and monitor the changes of location.href to obtain the above data information
2. Then the sub-page performs corresponding logical processing according to this data information
Child page passes data to parent page
The implementation technique is to use a proxy iframe, which is embedded in the child page, and must be in the same domain as the parent page, and then pass the data of the child page to the proxy iframe by making full use of the implementation principle of the first communication method above. Then, since the proxy's iframe and the main page are in the same domain, the main page can obtain the data in the same domain. Use window.top or window.parent.parent to get a reference to the topmost window object of the browser.