对iframe跨域通信的封装
github源码:https://github.com/boycy815/topProxy
为了偷懒所以依赖了Kissy:http://docs.kissyui.com/
用法举例:
需求是在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传递信息的目的。
对iframe跨域通信的封装的更多相关文章
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- iframe跨域通信方案
概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...
- Javascript使用postMessage对iframe跨域通信
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...
- html5 postMessage解决iframe跨协议跨域通信问题
a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...
- Javascript 使用postMessage对iframe跨域传值或通信
实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 父页面代码:www.a.com/a.html <iframe id="myIframe" src ...
- 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)
原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...
- 使用 iframe + postMessage 实现跨域通信
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
随机推荐
- 剑指offer系列21--二叉搜索树的后续遍历序列
* 21[题目]输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. * 如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. * [注]二叉搜索树特点:左子树比根结 ...
- 【虚拟化】支持IDE/SATA/SCSI
驱动说明 IDE :IDE和SATA是最常用的两种磁盘格式,基本每个系统上都会有: SATA:同IDE: SCSI :系统上一般缺少此驱动,需要手动安装: Linux下的名称 IDE硬盘:hd[ ...
- Python 字典的创建赋值和动态扩展
>>> cleese={} >>> palin=dict() >>> type(cleese) <class 'dict'> > ...
- 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:20160928' did not find a matching property
控制台看到如下警告: 症状原因: 在eclipse配置好的tomcat服务器上双击,打开tomcat服务器的配置界面.按如下操作配置服务器:在Server Options勾上的选项,会在你部署web项 ...
- item3 二维数组中的查找[剑指offer]
题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有这个整数? 8 9 思路:查找7 ...
- php的函数iconv在转"utf-8"到"gb2312"时会自动截断
最近在写网站后台时候,需要用到iconv函数把前端jquery Post来过的utf-8编码内容转成gb2312, 发现只有用iconv函数把内容的数据一转码数据就会无缘无故的少了一部分. 问了我 ...
- android.database.sqlite.SQLiteCantOpenDatabaseException: unknown error(Sqlite code 14): Could not open database,(OS error - 13:Permission denied)
07-24 15:03:14.490 6291-6291/com.tongyan.nanjing.subway E/SQLiteDatabase: Failed to open database '/ ...
- HBASE解析
Hbase是运行在Hadoop上的NoSQL数据库,它是一个分布式的和可扩展的大数据仓库,也就是说HBase能够利用HDFS的分布式处理模式,并从Hadoop的MapReduce程序模型中获益.这意味 ...
- 转-封装网络请求库,统一处理通用异常 (基于volley网络请求库)
http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...
- cvc-elt.1: 找不到元素 'beans' 的声明
这次遇到的这个错误又坑爹又低级 , 是因为网上抄到了错误的xsd搞的. 这是网上抄到的 xsi:schemalocation=" http://www.springframework.org ...