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，只是目前还没有正式开始