zoukankan      html  css  js  c++  java
  • 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下:

    <div class="CrossDocumentMessage"> Cross Document Message  ,    core---->postMessage()</div>
    
    <iframe id="frame_corssDM" src="http://localhost:63342/XDM.html">
            postMessage() 方法
    </iframe>

                                          假设该页面的访问地址为:
    http://localhost:63342/XDM1.html
                                
    与该页面进行消息传递的页面为:http://localhost:63342/XDM.html(即<iframe>的sr

    这时需要添加JavaScript脚本:首先在http://localhost:63342/XDM1.html   页面(当前页面)添加js 如下:

     var Ele_frame= document.getElementById('frame_corssDM').contentWindow;
        Ele_frame.postMessage('getcolor','http://localhost:63342/');//(参数一是 要发送的字符串,参数二是 消息接收者所在的域的 字符串形式)

    接下来在消息接收页面添加js ,由于 接收XDM消息时,会触发 window 对象的 message 事件,所以......

    window.addEventListener('message',function(event){
    if(event.origin=="http://localhost:63342"){        //确保消息是发送方是 我们知道的
    var color=document.getElementById('canvasImg').style.backgroundColor;
    window.parent.postMessage(color,'http://localhost:63342');
    }
    },false);

    我们将消息从当前页面http://localhost:63342/XDM1.html)发送至消息接收方http://localhost:63342/XDM.html),之后消息接收方又给当前页面发送一条消息,此时只要在当前页面 添加如下代码......

     window.addEventListener('message',function(event){
            var Ele_CDM=document.getElementsByClassName('CrossDocumentMessage')[0];
    
            Ele_CDM.innerHTML=event.data;
        },false);

    就可将接收到的回显数据添加至页面

  • 相关阅读:
    如何做一个按钮二个事件
    JavaScript中onmouseover时如何让鼠标指针变成一个小手状
    英语口语整理,灵活运用了,口语基本就没问题了
    javascript 传递 '' 时出错 换成 '&' ok
    一个按钮触发两个事件可以吗?
    Select中DISTINCT关键字的用法?
    使下拉框某项不可选的方法
    新打开窗口属性 a href
    调试和测试 Swing 代码
    打造专业外观九宫图
  • 原文地址:https://www.cnblogs.com/CHWYH/p/5231087.html
Copyright © 2011-2022 走看看