XDM 跨文档传递消息

XDM 跨域发送消息

  /**
   * 垮文档消息传递
   * XDM 核心 postMessage() 方法
   * @msg 传递的数据  当然传递的数据可以是其他数据类型，为了更好的兼容浏览器，建议使用JSON.stringify()
   * @url 接受哪个域  这里很重要，如果参数为“ * ”，那么它就接受任何域的消息，为了安全建议指定一个域 （那么指定多个域呢？）
   * iframe 要获取contentwindow    document.querySelector('#iframe').contentwindow
   * window.postMessage()
  */ 
  // 跨域发送消息
  setTimeout(function(){
    window.postMessage('xiaoji','http://127.0.0.1:5500')
  },2000)

 // 接受跨域发送的消息
  window.onmessage = function(res){
    /**
     * @data 发送过来的消息
     * @origin 发送消息的所在域
     * @source  发送消息的window对象代理，如果是同一个域返回当前对象window，但是一定要记住，它只是window代理，并不能访问它的其他属性信息，只能调用postMessage()
    */
    // 确保发送的是已知的域名（为了安全，不接收其他域发送的消息）
    if(res.origin ==  'http://127.0.0.1:5500'){
      // 处理接受到的数据

      // 可选：向来源域发送回执(这里跟以上一样，去接受回执)
      res.source.postMessage()
    }

  }