H5页面跨窗口通信之postMessage（iframe子页面向父页面发送信息）

电玩女神 2022-12-20 02:11 684阅读 0赞

## 需求背景 ##

最近在做H5项目时，遇到一个需求，公司所有的项目共用了一个防人机页面，当人机验证完成时需要把结果参数发送给调用它的父页面，APP端在使用验证页面时，结果是通过H5与APP交互方法传递的；但是H5引用这个页面时，只能通过iframe内嵌的方式来实现，这样在验证通过后就面临着iframe内嵌页面需要将验证结果发送给外部父页面，通知外部父页面做相应的处理；

## 实现方式 ##

###     1.父页面发送消息，子页面接受消息 ###

父页面：

<h1>父页面</h1>
    <iframe id="iframe" src="http://b.index.com"></iframe>

const iFrame = document.getElementById('iframe')
    
    iFrame.onload = function(){
      
      iFrame.contentWindow.postMessage('父页面发送的消息','http://b.index.com');
    }

子页面：

//有发送就有接收，与postMessage配套使用的就是message事件
    window.addEventListener('message',e=>{
        
        if(e.origin==='http://a.index.com'){
            console.log(e.origin) //父页面URL，这里是http://a.index.com
            console.log(e.source) // 父页面window对象，全等于window.parent/window.top
            console.log(e.data)  //父页面发送的消息
        }
    },false)

###     2.子页面发送消息，父页面接受消息   ###

子页面：

window.parent.postMessage('子页面发送的消息','http://a.index.com')

父页面：

window.addEventListener('message',e=>{
        
        if(e.origin==='http://b.index.com'){
            console.log(e.origin) //子页面URL，这里是http://b.index.com
            console.log(e.source) // 子页面window对象，全等于iframe.contentWindow
            console.log(e.data) //子页面发送的消息
        }
    },false)

## 注意： ##

*  window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window
    
     *  父页面中：父页面向子页面发送跨域信息，window就是在父页面中嵌入的iframe指向的子页面的window，即：iFrame.contentWindow
     *  子页面中：子页面想父页面发送跨域信息，window就是父页面的window，在这里因为子页面是嵌入到父页面中的，对于子页面来讲，window就是top或者parent
 *  需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息
 *  在监听message事件时需要判断一下消息来源origin

最后附送父页面检测到子页面发送的消息后，调用iframe子页面自刷新方法：

父页面：

window.addEventListener("message", e => {
          if (e.data && e.data.verifData) {
            //调用子页面自刷新
            e.source.location.reload(true)
          }
        }, false)