请使用firefox,chrome等最新浏览器浏览本站。

跨域总结5 – messenger.js

js+jquery 阿豹 1300次浏览 0个评论 扫描二维码

此文出自iframe跨域通信的通用解决方案-第二弹!(终极解决方案)
messenger.js的原理:
对于现代浏览器,postMessage API还是无可撼动的。IE6/7下,使用的是一个被认为是bug或安全漏洞的特性,即navigator对象在父窗口和iframe之间是共享的。基于这一点,我们可以在父窗口中,在navigator对象上注册一个消息回调函数;在iframe中,调用navigator上的这个函数并传入参数。此时可看作,iframe往父窗口的一个函数传递了一个参数,并在父窗口的上下文中执行了,那么就相当于iframe向父窗口发送了一条消息。

使用方法:
1.在需要通信的文档中(父窗口和iframe们), 都确保引入MessengerJS

2.每一个文档(document), 都需要自己的Messenger与其他文档通信. 即每一个window对象都对应着一个, 且仅有一个Messenger对象, 该Messenger对象会负责当前window的所有通信任务. 每个Messenger对象都需要唯一的名字, 这样它们才可以知道跟谁通信.

    var messenger = new Messenger('parent', 'MessengerDemo'),

3.监听消息事件

    messenger.listen(function(msg){
        alert("收到消息: " + msg);
    });

4.添加消息对象

    messenger.addTarget(hIframe.contentWindow, 'hIframe');
    messenger.addTarget(fIframe.contentWindow, 'fIframe');

5.发送消息

    // 父窗口中 - 向单个iframe发消息
    messenger.targets['iframe1'].send(msg1);
    messenger.targets['iframe2'].send(msg2);
 
    // 父窗口中 - 向所有目标iframe广播消息
    messenger.send(msg);

完整代码示例:

    <html>
    <meta charset="UTF-8" />
    <h1>通过messenger.js 进行javasript 跨域</h1>
    <script src="messenger.js" type="text/javascript" charset="utf-8"></script>
    <iframe src="http://www.hui.com/huanhuba/modelWebsite/js/iframe/name/messenger/header.html" width="" height="" id="hIframe">header</iframe>
    <a href="javascript:sendheader();">send to header iframe</a>
    <a href="javascript:sendfooter();">send to footer iframe</a>
    <iframe src="http://www.hui.com/huanhuba/modelWebsite/js/iframe/name/messenger/footer.html" width="" height="" id="fIframe">footer</iframe>
    <script type="text/javascript">
        var messenger = new Messenger('parent', 'MessengerDemo'),
            hIframe = document.getElementById('hIframe'),
            fIframe = document.getElementById('fIframe');

        messenger.addTarget(hIframe.contentWindow, 'hIframe');
        messenger.addTarget(fIframe.contentWindow, 'fIframe');

        function sendheader() {
            var _msg = " hello header";
            messenger.targets['hIframe'].send(_msg);
        }
        
        function sendfooter() {
            var _msg = " hello footer";
            messenger.targets['hIframe'].send(_msg);
        }


        messenger.listen(function(msg) {
            alert(msg);
        });
    </script>

</html>

完整demo下载


喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到