iframe通訊必備（postMessage）

postMessage

postMessage是什麼？

window.postMessage() 方法能夠安全地實現跨源通訊。 咱們一般用於iframe通訊，只要兩個頁面具備相同的協議，端口號，他們就能夠相互通訊。一樣，postMessage也提供了一種受控機制來規避此限制，只要正確使用，這種方法就很安全。

基本語法：父發送消息。

//主頁面基本使用
otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow 其餘窗口的一個引用好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames，這個就很難理解，官方文檔沒有具體案例，就看的很迷糊，看我下面的案例
  <iframe id="ifm" src="http://localhost:8081"></iframe>
let otherWindow = document.getElementById("ifm").contentWindow
//這裏是第一種引用iframe的contentWindox屬性
//targetOrigin，就是你要傳消息的那個頁面

複製代碼

基本語法：子頁面接受消息

  window.addEventListener('message',function(e){
           if(e.origin == 'http://localhost:8080'){
             console.log('接受到了父頁面的消息')
             console.log(e.origin,'父頁面地址')
             event.source.postMessage('子頁面傳給父頁面的數據',e.origin)
           }
        })
複製代碼

小結：經過window.addEventListener('message',(e)=>{

console.log('收到通知的操做')

})

咱們來看一個使用的實例：父頁面。

<template>
<div>
  <div>iframe的父頁面</div>
  <button id="send">點擊發送信息</button>
  <iframe id="ifm" src="http://localhost:8081"></iframe>
</div>
</template
<script> export default { name: 'HelloWorld', data () { }, mounted(){ //給子頁面發送消息 let xmIframe = document.getElementById("ifm").contentWindow let btn = document.getElementById('send'); btn.addEventListener('click', () => { // iframe加載後, 向iframe發送參數 xmIframe.postMessage('true',"http://localhost:8081")
})
//接受子頁面消息
 window.addEventListener('message',function(e){
         console.log(e.data)
    })
複製代碼
} } </script> <style scoped>
複製代碼})
//接受子頁面消息
 window.addEventListener('message',function(e){
         console.log(e.data)
    })
複製代碼</style>

子頁面

<template>
  <div class="hello">
  <div>我是子頁面</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
      window.addEventListener('message',function(e){
           if(e.origin == 'http://localhost:8080'){
             console.log('接受到了父頁面的消息')
             console.log(e.origin,'父頁面地址')
             event.source.postMessage('子頁面傳給父頁面的數據',e.origin)
           }
        })
  },
}
</script>
<style scoped>
</style>
複製代碼

小結：這裏要注意幾個地方，首先要判斷髮送消息的頁面，是不是你想要的的，e.origin,能夠取到發送消息的那個頁面的url，event.source能夠對發送消息窗口對象的引用，等於你父頁面取子頁面窗口引用的那個步驟。

總結：其實很簡單的一個東西，可是官方文檔語術太專業，某度文檔又太雜亂，致使看了好久都沒明白，寫了demo結合官方文檔才徹底吸取。