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 相关文章推荐
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JavaScript获取路径设计源码
May 22 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
JS如何把字符串转换成json
Feb 21 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
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Java servlet面试题
2012/03/04 面试题
自立自强的名人事例
2014/02/10 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
绿色环保演讲稿
2014/05/10 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014年体育工作总结
2014/11/24 职场文书
小学生安全保证书
2015/05/09 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
导游词之日月潭
2019/11/05 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript