陶醉的松鼠

外观

本页目录

父页面给子页面发postMessage消息 ​

父页面发送 ​

html
 <div v-if="open">
      <iframe  marginwidth="0"  marginheight="0" ref="receiver" width="100%" height="800px" frameborder="0" :src="url" @load="iframeload"></iframe>
    </div>
js

 function delay(num) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(true)
      }, num)
    })
  }
  const iframeload=(e)=>{
  // 父页面给子iframe发消息，load事件只能保证DOM加载完了，事件监听未生效
   const ifrd=e.target
    // 所以延迟一秒发消息，确保子页面addEventListener已注册
     delay(1000).then((res: any)=>{
       console.log('iframeload',ifrd)
       ifrd.contentWindow.postMessage('fdasfsdaffsaf', '*');
     })

  }

子页面监听 ​

javascript
  window.addEventListener('message', (ev) => {
    console.log(ev)
  })