iframe跨域通信封装详解
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传递信息的目的
相关文章
这篇文章主要为大家详细介绍了jquery背景跟随鼠标滑动导航，特别美观，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下2016-01-01
html中的input标签的checked属性jquery判断代码
input 标签具有checked属性，而当input标签的type属性设为button时，如果给input标签的checked属性赋值时，在vs中会报错，提示 特性checked不是元素input的有效特性2012-09-09
这篇文章主要介绍了jQuery网页元素拖拽插件的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要为大家详细介绍了利用jQuery给表格添加分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
jQuery)扩展jQuery系列之一 模拟alert，confirm（一）
很多人都为了使alert系统的调用函数在自己的控制范围之内，都选择了去封装一个属于自己的alert组件，现在我们就动手实现一个这样的小部件。2010-12-12
本文给大家分享的是使用jQuery实现简单二级下拉菜单的代码，非常的简单实用，这里推荐给大家，有需要的小伙伴可以美化下，直接带走。2015-04-04
在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。2011-06-06
鼠标经过table变色的效果，想必大家都有遇到过吧，其实实现并不难，在本文为大家详细介绍下jquery是如何实现的，感兴趣的朋友可以参看下2013-09-09
这篇文章主要介绍了jQuery操作动态生成的内容的方法,对比分析了bind与live方法,说明了live方法在处理新增元素时的作用,需要的朋友可以参考下2016-05-05
最新评论