当前位置： 移动技术网 > IT编程>开发语言>JavaScript > iframe与主框架跨域相互访问实现方法

iframe与主框架跨域相互访问实现方法

2017年12月12日  | 移动技术网IT编程  | 我要评论

1.同域相互访问

假设a.html 与 b.html domain都是localhost （同域）
a.html中iframe 嵌入 b.html，name=myframe
a.html有js function fmain()
b.html有js function fiframe()
需要实现 a.html 调用 b.html 的 fiframe()，b.html 调用 a.html 的 fmain()

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('main function execute success');
 }

 // 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('iframe function execute success');
 }

 // 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>

点击a.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图

点击b.html 的 exec main function button，执行成功，弹出 main function execute success。如下图

2.跨域互相访问

假设 a.html domain是 localhost， b.html domain 是 127.0.0.1 （跨域）
这里使用 localhost 与 127.0.0.1 只是方便测试，localhost 与 127.0.0.1已经不同一个域，因此执行效果是一样的。
实际使用时换成 www.domaina.com 与 www.domainb.com 即可。
a.html中iframe 嵌入 b.html，name=myframe
a.html有js function fmain()
b.html有js function fiframe()
需要实现 a.html 调用 b.html 的 fiframe()，b.html 调用 a.html 的 fmain() （跨域调用）

如果使用上面同域的方法，浏览器判断a.html 与 b.html 不同域，会有错误提示。
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.

实现原理：

因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。

首先，a.html 如何调用b.html的 fiframe方法
1.在a.html 创建一个 iframe
2.iframe的页面放在 b.html 同域下，命名为execb.html
3.execb.html 里有调用b.html fiframe方法的js调用

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

这样a.html 就能通过 execb.html 调用 b.html 的 fiframe 方法了。

同理，b.html 需要调用a.html fmain方法，需要在b.html 嵌入与a.html 同域的 execa.html
execa.html 里有调用 a.html fmain 方法的js 调用

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

这样就能实现 a.html 与 b.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('main function execute success');
 }

 // exec iframe function
 function exec_iframe(){
	if(typeof(exec_obj)=='undefined'){
		exec_obj = document.createelement('iframe');
		exec_obj.name = 'tmp_frame';
		exec_obj.src = 'http://127.0.0.1/execb.html';
		exec_obj.style.display = 'none';
		document.body.appendchild(exec_obj);
	}else{
		exec_obj.src = 'http://127.0.0.1/execb.html?' + 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('iframe function execute success');
 }

 // exec main function
 function exec_main(){
	if(typeof(exec_obj)=='undefined'){
		exec_obj = document.createelement('iframe');
		exec_obj.name = 'tmp_frame';
		exec_obj.src = 'http://localhost/execa.html';
		exec_obj.style.display = 'none';
		document.body.appendchild(exec_obj);
	}else{
		exec_obj.src = 'http://localhost/execa.html?' + 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>

执行如下图：

源码下载地址：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网