Home > Article > Web Front-end > Introduction to cross-domain mutual access methods between iframe and main frame

Introduction to cross-domain mutual access methods between iframe and main frame

巴扎黑Original: 2017-09-16 09:33:142040browse

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>

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>

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>

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>

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>

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to determine value type in JavaScriptNext article：How to determine value type in JavaScript

See more

Introduction to cross-domain mutual access methods between iframe and main frame

Related articles