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


Posted in Javascript onSeptember 14, 2017

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与主框架跨域相互访问实现方法

源码下载地址:点击查看

Javascript 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 #Javascript
vue 计时器组件的实现代码
Sep 14 #Javascript
详解tween.js的使用教程
Sep 14 #Javascript
JS库之wow.js使用方法
Sep 14 #Javascript
JavaScript正则表达式和级联效果
Sep 14 #Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js 上传图片预览问题
2010/12/06 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python调用百度语音REST API
2018/08/30 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python编写打字训练小程序
2019/09/26 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
通用自荐信范文
2014/03/14 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
销售内勤岗位职责
2014/04/15 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
部门主管竞聘书
2015/09/15 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL