欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 12:37:48
1.同域相互访问 假设a.html 与 b.html domain都是localhost (同域) a.html中iframe 嵌入 b.html,name=myfra...

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。如下图

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

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

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

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>

执行如下图:

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

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

源码下载地址: