Introduction to cross-domain mutual access methods between iframe and main frame-JS Tutorial-php.cn

Today I just need to use the implementation method of mutual access between iframe and main frame. I happened to see this article. It is really good. I would like to share it. Friends who need it can refer to it

1. Same Mutual access between domains

Assume that A.html and b.html domains are both localhost (same domain)
The iframe in A.html is embedded in B.html, name=myframe
A.html There is js function fMain()
B.html has js function fIframe()
It is necessary to implement A.html to call fIframe() of B.html, and B.html to call fMain() of A.html

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> main window </title>

 <script type="text/javascript">
 // main js function
 function fMain(){
	alert(&#39;main function execute success&#39;);
 }

 // exec iframe function
 function exec_iframe(){
	window.myframe.fIframe();
 }
 </script>

 </head>

 <body>
 <p>A.html main</p>
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
 <iframe src="B.html" name="myframe" width="500" height="100"></iframe>
 </body>
</html>

Copy after login

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> iframe window </title>

 <script type="text/javascript">
 // iframe js function 
 function fIframe(){
	alert(&#39;iframe function execute success&#39;);
 }

 // exec main function
 function exec_main(){
	parent.fMain();
 }
 </script>

 </head>

 <body>
 <p>B.html iframe</p>
 <p><input type="button" value="exec main function" onclick="exec_main()"></p>
 </body>
</html>

Copy after login

Click

A.html exec iframe function button, the execution is successful, and iframe function execute success pops up. As shown below

click the exec main function button of

B.html , the execution is successful, and main function execute success pops up. As shown below

2. Cross-domain mutual access

Assume that A.html domain is localhost and B.html domain is 127.0. 0.1 (cross-domain)

The localhost and 127.0.0.1 are used here just to facilitate testing. Localhost and 127.0.0.1 are already in different domains, so the execution effect is the same.
In actual use, just change to www.domaina.com and www.domainb.com.
The iframe in A.html is embedded in B.html, name=myframe
A.html has js function fMain()
B.html has js function fIframe()
Need to implement A.html to call B .html's fIframe(), B.html calls A.html's fMain() (cross-domain call)

If you use the above same-domain method, the browser determines that A.html and B.html are in different domains. There will be an error message.

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.

Implementation principle:

Because the browser prohibits access from different domains for security reasons. Therefore, as long as the calling and executing parties are in the same domain, they can access each other.

First, how does A.html call the fIframe method of B.html

1. Create an iframe in A.html
2. Place the iframe page under the same domain as B.html and name it execB.html
3.execB.html contains the js call that calls the fIframe method of B.html

<script type="text/javascript"> 
parent.window.myframe.fIframe(); // execute parent myframe fIframe function 
</script>

Copy after login

so that A.html can call B through execB.html .html’s fIframe method.

Similarly, B.html needs to call the A.html fMain method, and B.html needs to be embedded in the execA.html

execA.html in the same domain as A.html to call the A.html fMain method. js call

<script type="text/javascript"> 
parent.parent.fMain(); // execute main function 
</script>

Copy after login

This way, A.html and B.html can call each other across domains.

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> main window </title>

 <script type="text/javascript">

 // main js function
 function fMain(){
	alert(&#39;main function execute success&#39;);
 }

 // exec iframe function
 function exec_iframe(){
	if(typeof(exec_obj)==&#39;undefined&#39;){
		exec_obj = document.createElement(&#39;iframe&#39;);
		exec_obj.name = &#39;tmp_frame&#39;;
		exec_obj.src = &#39;http://127.0.0.1/execB.html&#39;;
		exec_obj.style.display = &#39;none&#39;;
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = &#39;http://127.0.0.1/execB.html?&#39; + Math.random();
	}
 }
 </script>

 </head>

 <body>
 <p>A.html main</p>
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
 <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>
 </body>
</html>

Copy after login

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> iframe window </title>

 <script type="text/javascript">
 // iframe js function 
 function fIframe(){
	alert(&#39;iframe function execute success&#39;);
 }

 // exec main function
 function exec_main(){
	if(typeof(exec_obj)==&#39;undefined&#39;){
		exec_obj = document.createElement(&#39;iframe&#39;);
		exec_obj.name = &#39;tmp_frame&#39;;
		exec_obj.src = &#39;http://localhost/execA.html&#39;;
		exec_obj.style.display = &#39;none&#39;;
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = &#39;http://localhost/execA.html?&#39; + Math.random();
	}
 }
 </script>

 </head>

 <body>
 <p>B.html iframe</p>
 <p><input type="button" value="exec main function" onclick="exec_main()"></p>
 </body>
</html>

Copy after login

execA.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> exec main function </title>
 </head>

 <body>
 	<script type="text/javascript">
		parent.parent.fMain(); // execute main function
	</script>
 </body>
</html>

Copy after login

execB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> exec iframe function </title>
 </head>

 <body>
	<script type="text/javascript">
		parent.window.myframe.fIframe(); // execute parent myframe fIframe function
	</script>
 </body>
</html>

Copy after login

Execute as shown below:

The above is the detailed content of Introduction to cross-domain mutual access methods between iframe and main frame. For more information, please follow other related articles on the PHP Chinese website!