对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方法。

返回栏目页:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

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传递信息的目的。

作者:cnblogs 小夜 Clifford

时间: 2025-01-21 06:10:21

对iframe跨域通信的封装的相关文章

iframe跨域通信封装详解_jquery

iframe跨域通信 查看演示        源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容. 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法. 1. 在top页面中建立方法供内部页面使用 复制代码 代码如下: func

Javascript中实现iframe跨域通信的例子

众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容.而实际编码时我们会遇到使用iframe跨域访问.Ajax跨域通信等操作,这个时候如何突破跨域操作的问题,本文将结合实例讲述解决方案. iframe不同子域通信 在同一主域不同子域如何进行Javascript调用?这个问题好解决,例如现有主域111cn.net和子域abc.111cn.net,在111cn.net有一个页面嵌入iframe的指向了abc.111cn.net下的某

通用Iframe跨域通信库实现

前言 前端在页面嵌入其他站点的页面时,常常会遇到跨域通信的问题,浏览器为了安全问题,限制了不同域名的JS直接调用. 解决方案 浏览器再限制跨域调用的同时,也预留了一个比较安全的通道.那就是message通道. 只要得到一个页面的window对象,都可以调用其postMessage的api,而不会有任何限制.而希望接受到其他页面message的页面只需要侦听这一消息即可.发送者代码示例 var parentWindow = window.parent; //假设这是一个放在iframe的页面,那么

js利用iframe实现跨域通信例子

为了方便演示跨域效果,先在 hosts 文件中加上以下内容: 127.0.0.1 www.myapp.com 127.0.0.1 sample.myapp.com 127.0.0.1 www.otherapp.com 下面我们就开始讨论如何使用iframe进行跨域通信,这里主要介绍以下几种方案: document.domain .URL.hash . Cross-fragment . Window.name . postMessage . document.domain 如果 A 源和 B 源具

利用iframe实现ajax跨域通信的实现原理(图解)_AJAX相关

在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

利用iframe实现ajax跨域通信的实现原理(图解)

在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

JavaScript使用HTML5的window.postMessage实现跨域通信例子

 这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下 JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多:  1.document.domain+iframe的设置,应用于主域相同而子域不同:  2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限  3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SW

AJAX机制详解以及跨域通信_AJAX相关

1.Ajax 1.1.Ajax简介   Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过.   Ajax的起源? Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文       章中介绍了一种新技术,用他的话说,就是Ajax :Asynchronous JavaScript +XML的缩写.  

JavaScript使用HTML5的window.postMessage实现跨域通信例子_javascript技巧

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动