github源码:https://github.com/boycy815/topProxyhtml
为了偷懒因此依赖了Kissy:http://docs.kissyui.com/git
用法举例:
需求是在http://www.demo.org/top.html中经过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中但愿经过点击一个按钮,调用top页面的一个js方法。
1. 在top页面中创建方法供内部页面使用github
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配置代理页面地址app
TopProxyConfig = {url:'http://www.demo.org/proxy.html'};
6. 经过kissy加载通讯模块ui
KISSY.use('topproxy', function(S, TopProxy){ //执行代码 });
7. 在http://www.iframe.com/iframe.html经过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如url
KISSY.use('topproxy', function(S, TopProxy){ TopProxy.call('testFun', '这是一个真实的故事'); });
其中call方法的第一个参数是外部网页的全局方法名,支持“.”,后面参数无限个,均传到目标方法里去。spa
注:
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传递信息的目的。code