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);

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

  • 相关阅读:
    推荐系统(10)—— 进化算法、强化学习
    Throttle Debounce 总结
    文件点击下载
    Mongodb安装及启动正确姿势
    事务的ACID是指什么?
    sqlserver 获取时间字段 每月最后一天 分组(分区)最后一条的记录
    echarts map js或json 地图数据下载
    sqlserver 字段 逗号分隔分组 多行数据
    windows10 中文输入法 增加美式键盘 导致 系统部分语言变成英文
    excel 合并相同内容的单元格 vba
  • 原文地址:https://www.cnblogs.com/CHWYH/p/5231087.html
Copyright © 2011-2022 走看看