Js communication between an iframe child page and a parent page in the same domain or in a different domain
- 2020-03-30 02:50:35
- OfStack
The iframe child page communicates with the parent page in different ways depending on whether the SRC attribute in the iframe is a co-domain link or a cross-domain link.
I. communication between parent and child pages in the same domain
The parent page parent. HTML
Child. The child pages HTML
The method call
The parent page call child pages method: FrameName window. ChildMethod ();
Child pages: call the parent page method. The parent window. The parentMethod ();
DOM element access
Once you get the window.document object of the page, you can access the DOM element
Matters needing attention
Be sure to wait until the iframe has finished loading. If the iframe starts calling methods or variables before it has finished loading, an error will occur. There are two ways to determine if an iframe has been loaded:
1. Use the onload event on the iframe
2. Use document.readystate =="complete"
Two, cross-domain parent-child page communication method
If the iframe is linked to an external page, the security mechanism cannot communicate with the same domain name.
The parent page passes data to the child page
The trick is to take the hash value of the location object and pass the communication data through it. Add a data string after the SRC of the iframe set on the parent page, and then in the child page, you can get the data here in a certain way instantly, for example:
1. Set the timer in the child page by setInterval method, and listen for the change of location.href to obtain the above data information
2. Then the child page is logically processed according to the data information
Child pages pass data to the parent page
Implementation technique is to use a proxy iframe, which is embedded into the child pages, and must keep is the same domain and the parent page, and then make full use of the above the first communication mode through it when the principle is the page data is passed to the agent the iframe, then due to the iframe of agent and the main page are of the same domain, so the main page can access to the data using the same domain. Use window.top or window.parent. Parent to get a reference to the top window object in the browser.
I. communication between parent and child pages in the same domain
The 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=" End of the call ";
}
</script>
</head>
<body>
<input id="button" type="button" value=" call child.html The function in say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
Child. The child pages HTML
<html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
}
function callParent(){
parent.say();
parent.window.document.getElementById("button").value=" End of the call ";
}
</script>
</head>
<body>
<input id="button" type="button" value=" call parent.html In the say() function " onclick="callParent()"/>
</body>
</html>
The method call
The parent page call child pages method: FrameName window. ChildMethod ();
Child pages: call the parent page method. The parent window. The parentMethod ();
DOM element access
Once you get the window.document object of the page, you can access the DOM element
Matters needing attention
Be sure to wait until the iframe has finished loading. If the iframe starts calling methods or variables before it has finished loading, an error will occur. There are two ways to determine if an iframe has been loaded:
1. Use the onload event on the iframe
2. Use document.readystate =="complete"
Two, cross-domain parent-child page communication method
If the iframe is linked to an external page, the security mechanism cannot communicate with the same domain name.
The parent page passes data to the child page
The trick is to take the hash value of the location object and pass the communication data through it. Add a data string after the SRC of the iframe set on the parent page, and then in the child page, you can get the data here in a certain way instantly, for example:
1. Set the timer in the child page by setInterval method, and listen for the change of location.href to obtain the above data information
2. Then the child page is logically processed according to the data information
Child pages pass data to the parent page
Implementation technique is to use a proxy iframe, which is embedded into the child pages, and must keep is the same domain and the parent page, and then make full use of the above the first communication mode through it when the principle is the page data is passed to the agent the iframe, then due to the iframe of agent and the main page are of the same domain, so the main page can access to the data using the same domain. Use window.top or window.parent. Parent to get a reference to the top window object in the browser.