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

  • 相关阅读:
    排球教练积分程序
    排球积分程序
    排球积分程序
    14周总结
    本周总结
    排球计分规则
    我与计算机
    排球计分程序
    《如何成为一个高手》观后感
    十八周总结
  • 原文地址:https://www.cnblogs.com/flash3d/p/3325887.html
Copyright © 2020-2023  润新知