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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
js 函数的副作用分析
2011/08/23 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
纯javascript版日历控件
2016/11/24 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python实现简易云音乐播放器
2018/01/04 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
django中的图片验证码功能
2019/09/18 Python
如何利用python 读取配置文件
2021/01/06 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
小学音乐教学反思
2014/02/05 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
人力资源部岗位职责
2015/02/11 职场文书
党支部考察鉴定意见
2015/06/02 职场文书