iframe 頁面嵌套

由於目前項目基礎界面，業務邏輯一樣，只是細微有所差別。因而使用iframe來進行定制化處理。

如何來區分不同需求不同頁面呢？

最初是想通過url攜帶參數來進行區分，但是隨着需求變多，定制化也越來越細微，若是再使用url進行處理，有些太累贅了。因而思量再三，開始使用postMessage進行處理。

postMessage

• 滿足跨域（不同域名間通信）
• message 可以傳遞對象
• targetOrigin 可以指定哪些窗口接收信息

代碼展示及描述

• 父向子傳遞信息

parent.html

• html

  <iframe id="iframe" src="http://DOMAIN1.com/child.html"></iframe>

• js

  const iframe = document.getElementByID('iframe')
  const sendChildData = {
    style: {
      btn_color: '#fff'
    }
  }
  // 默認只要是嵌套的頁面都可以接收信息 *
  iframe.contentWindow.postMessage(sendChildData, '*')

child.html

• html

  <button id="btn">提交</button>  

• js

  window.addEventListener('message', function (e) {
    if (!e.data) return
    const { style } = e.data
    const btn = document.getElementByID('btn')
    btn.style.color = style.btn_color
  }, false)

子向父傳遞參數

此處代碼省略，簡述實現原理

• 需要明確 誰 發送postMessage， 哪兒接受message
  • 信息發給誰，誰就使用。在父向子時，需要找到 iframe窗口；同理子向父，就需要找到父窗口window.parent
  • message 直接使用 window.addEventListener('message', function () {}, false) 來進行處理即可

需要注意的一些問題

• 需要iframe加載完，才能發送信息，否者子元素無法獲取到，推薦使用 window.onload（因為onload是等所有資源加載才執行）
• 由於並非是只有你一人使用 postMessage,因而最好相互溝通，或者傳入特定參數進行判斷，不然接收多次數據，就有些凌亂了

使用iframe可以完成什么

• 常見的iframe邏輯觸發，頁面樣式跟着改變，因而需要實時通知父元素，自己的高度。這在之前，更多地是使用setInterval定時去查詢，但是多少總有些不好。而使用postMessage便可以簡化，事件觸發就調用一下發送postMessage事件
• 跨域通信，這個上面已有，就不細述

總結

• 使用時，盡量指定origin，這樣安全些
• 鑒於使用iframe多少總有些安全顧慮，最新Google新出了一個標簽Portals，只是目前還沒有正式開始