使用postMessage进行跨域通信

跨域通信是前端开发中经常会遇到的情景,跨域通信有多种多样的方式,今天就详细说一下使用postMessage这样方式进行跨页面脚本的数据通信。

一、认识window.postMessage

根据MDN的官方文档解释:window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。

二、使用语法

1、向目标窗口发送消息

  otherWindow.postMessage(message,targetOrigin)
  • otherWindow

    其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

  • message

    将要发送到其他窗口的数据。

  • targetOrigin

    指定哪些窗口能接收到消息,其值可以是字符串"*"(表示无限制)或者一个URI,在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口.

2、目标窗口接收消息

 

  window.addEventListener("message", receiveMessage, false);
  function receiveMessage(event){
    // event.origin 表示消息的来源地址
    // event.data 表示接收到的数据
    if (event.origin !== 'http: //www.xxxx.com') {
      return
    } else { 
      console.log(event.data)
    }
  }

三、具体案例

本案例是在Vue2.0+iView3.0的环境下进行,在一个弹框内嵌套一个iframe页面。

  • 模板

    
    
        
    iFrame页面
  • 逻辑

    data() {
      return {
        isModalShow: false
      }
    },
    methods: {
      show(){
        this.isModalShow = true
        let iframe = document.getElementById('iframe')
        let data = 'hello'
        if (iframe.attachEvent){ // 兼容IE写法
            // 必须在ifame页面加载完毕后才能发送消息,否则对方接收不到
            iframe.attachEvent("onload", function(){
              // 发消息
              iframe.contentWindow.postMessage(data, 'http://target.com:9900')
            })
          } else {
            iframe.onload = function(){
              // 发消息
              iframe.contentWindow.postMessage(data, 'http://target.com:9900')
          }
        }
        // 收消息(在目标页面进行相关操作,接收发送过来需要的数据) 
        window.addEventListener('message',this.receiveMessage,false)
      },
      // 接收消息回调
      receiveMessage(event){
        // 判断是否是目标地址发过来的消息,否则不接收
         if (event.origin !== 'http://target.com:9900') {
          return
        } else {
          // event.data 为接收到的数据
          console.log(event.data)
          // 处理数据.....
          this.isModalShow = false
        }
      },
      // 弹框关闭时移除消息监听
      visibleModalChange(){
        window.removeEventListener('message',this.receiveMessage,false)
      }
    }
    

    四、注意事项

    1、需要通过onload的事件监听iframe页面加载完毕后在发生消息,发送接收不到。

    2、一定要在页面关闭的时候移除监听事件,否则会导致在每打开一次iframe页面,接收的消息会叠加一次的问题。

使用postMessage进行跨域通信_第1张图片

 

你可能感兴趣的:(Vue,JavaScript,H5)