iframe跨域通信封装详解


Posted in Javascript onAugust 11, 2015

iframe跨域通信

查看演示        源码下载

众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。

用法举例:

需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。

1. 在top页面中建立方法供内部页面使用

function testFun (text) {

 alert(text);

}

2. 在http://www.demo.org/top.html中嵌入iframe

<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>

3. 建立www.demo.org域下建立一个代理页面http://www.demo.org/proxy.html用于跨域通信使用

4. 在http://www.demo.org/proxy.html加入用于代理页面的逻辑

5. 在http://www.iframe.com/iframe.html页面中通过js配置代理页面地址

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. 通过kissy加载通信模块

KISSY.use('topproxy', function(S, TopProxy){

//执行代码

});

7. 在http://www.iframe.com/iframe.html通过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

其中call方法的第一个参数是外部网页的全局方法名,支持“.”,后面参数无限个,均传到目标方法里去。

注:

1. 调用后可能不会立即执行,会等到iframe加载完毕后才触发,如果想预加载可以提前执行一个没用的方法。
2. 如果不设置TopProxyConfig,那么会认为引用iframe和父iframe同域(大域)并直接调用top对象。
3. 在IE678下可能直接调用top中的系统方法会报错,由于系统方法不支持apply。

原理:

A页面嵌日的iframe页面B,其中B想调用A的方法并传递数据,那么可在B中嵌入A页面同域下的一个iframe页面C,C可以通过window.top访问到A的window。那么在B中可以改变C的href的hash向C传递一些信息,然后C再把这些信息传递给A,从而间接达到B给A传递信息的目的

Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 #Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 #Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 #Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
You might like
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python处理大数字的方法
2015/05/27 Python
Python3.6正式版新特性预览
2016/12/15 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python实现月食效果实例代码
2019/06/18 Python
python变量命名的7条建议
2019/07/04 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python可以用哪些数据库
2020/06/22 Python
自我评价的正确写法
2013/09/19 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
个性大学生自我评价
2013/12/04 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书