大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

iframe与主框架跨域如何实现相互访问

这篇文章给大家分享的是有关iframe与主框架跨域如何实现相互访问的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

綦江网站建设公司成都创新互联公司,綦江网站设计制作,有大型网站制作公司丰富经验。已为綦江近千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的綦江做网站的公司定做!

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



 
 
  main window 

 
 // main js function
 function fMain(){
	alert('main function execute success');
 }

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

 

 
 

A.html main

 

   

B.html



 
 
  iframe window 

 
 // iframe js function 
 function fIframe(){
	alert('iframe function execute success');
 }

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

 

 
 

B.html iframe

 

 

点击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调用

 
parent.window.myframe.fIframe(); // execute parent myframe fIframe function 

这样A.html 就能通过 execB.html 调用 B.html 的 fIframe 方法了。

同理,B.html 需要调用A.html fMain方法,需要在B.html 嵌入与A.html 同域的 execA.html
execA.html 里有调用 A.html fMain 方法的js 调用

 
parent.parent.fMain(); // execute main function 

这样就能实现 A.html 与 B.html 跨域相互调用。

A.html



 
 
  main window 

 

 // 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();
	}
 }
 

 

 
 

A.html main

 

   

B.html



 
 
  iframe window 

 
 // 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();
	}
 }
 

 

 
 

B.html iframe

 

 

execA.html



 
 
  exec main function 
 

 
 	
		parent.parent.fMain(); // execute main function
	
 

execB.html



 
 
  exec iframe function 
 

 
	
		parent.window.myframe.fIframe(); // execute parent myframe fIframe function
	
 

执行如下图:

iframe与主框架跨域如何实现相互访问

iframe与主框架跨域如何实现相互访问

感谢各位的阅读!关于“iframe与主框架跨域如何实现相互访问”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


标题名称:iframe与主框架跨域如何实现相互访问
本文来源:http://dzwzjz.com/article/jcosos.html
在线咨询
服务热线
服务热线:028-86922220
TOP