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跨域通信的封装的更多相关文章

  1. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  2. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  3. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

  4. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

  5. Javascript 使用postMessage对iframe跨域传值或通信

    实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 父页面代码:www.a.com/a.html <iframe id="myIframe" src ...

  6. 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  7. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  8. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

随机推荐

  1. Func系列2:常用模块及API

    简介 Func提供了非常丰富的功能模块,包括CommandModule(执行命令).CopyFileModule(拷贝文件).CPUModule(CPU信息).DiskModule(磁盘信息).Fil ...

  2. SNM2无法编辑HostGroup项

    经常遇到SNM2的工具无法更新,无法编辑,或者加载急慢的情况.解决方法就是在SNM2重新添加Array,然后再重新登录试试

  3. android学习笔记三

    GUI==>Graphics User Interface,图形用户界面. android UI 建立在View.ViewGroup基础上,采用组合器设计模式设计View和ViewGoup. V ...

  4. [物理学与PDEs]第1章习题参考解答

    [物理学与PDEs]第1章习题1 无限长直线的电场强度与电势 [物理学与PDEs]第1章习题2 均匀带电球面的电场强度与电势 [物理学与PDEs]第1章习题3 常场强下电势的定解问题 [物理学与PDE ...

  5. bug_ _java.lang.RuntimeException: Unable to start activity ComponentInfo{包名/类名}

      写这篇博文,我顶着很大的压力,贴出来会引来网友的一片鄙视,不贴我又觉得对不起Android SDK研发团队. 本着对全世界Android无产者负责的态度,今天不得不指出Android编译时隐藏的很 ...

  6. 编译器错误消息: CS0234: 命名空间“Purple”中不存在类型或命名空间名称“Model”(是否缺少程序集引用?)

    编译错误 “/storeimg”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS023 ...

  7. Java多线程之后台线程

    将线程设置成后台线程Daemons 主线程结果后,后台线程将自动结果. package wzh.test; import java.util.concurrent.TimeUnit; class Si ...

  8. 聚合查询中的Group by

    2005版本以上的sql server 查询中如果既包含聚合函数列(诸如sum ,count,avg,max等)又存在一般列的情况,则查询字符串结尾必须包含Group By [某一般列].  其实微软 ...

  9. 在Windows驗證網站設定部分匿名存取

    最近接連遇到幾次的需求:供內部使用的ASP.NET網站,全站使用Windows驗證,使用者以網域AD帳號登入,但網站包含少數API性質的ASHX.ASPX或MVC Action,提供其他系統呼叫整合. ...

  10. 采访ServiceStack的项目领导Demis Bellot——第1部分(转)

    ServiceStack是一个开源的.支持.NET与Mono平台的REST Web Services框架.InfoQ有幸与Demis Bellot深入地讨论了这个项目.在这篇两部分报道的第1部分中,我 ...