iframe 页面间的通信(分享)

1. 概述

• 在许多老的项目中使用的都是 iframe 进行的页面嵌套，我这里写了三个页面进行演示
• 红色的页面为最外层，本地开的服务，端口为 5500，而黄色和蓝色的页面分别为第二层和第三层，端口为 5501
• 专门做的不是一个端口，后面会有作用

2. 页面之间传递数据

 <button onclick="sendMessage()">发送消息</button>

<script>
const iframe = document.querySelector("iframe");
  var data = {
    name: "rootPage",
    data: "我是主页面的数据"
  };

function sendMessage() {
  // postMessage(发送的消息, 允许发送的源、* 为默认所有都可以发送)
  // 如果是跨域的页面，需要拿到消息接收页面的 contentWindow 才可以发送
  iframe.contentWindow.postMessage(data, "http://127.0.0.1:5501"); // 父页面监听 message 事件
}
</script>

3. 直接获取父页面的数据

window.parent // 获取父页面window对象，如果没有父页面将返回自身

window.top // 获取顶层页面window对象

// 这种只能在同源下才可以，如果不是则获取不到外层页面的信息

4. 获取父级页面源的信息

这个是我在写项目是遇到的，不同的也不是同源的项目需要通过 iframe 合并引用

// 获取除了自身页面，外层所有页面的源(从内向外)
location.ancestorOrigins

// 比如刚才的例子，我在最内层打印这个
{
    "0": "http://127.0.0.1:5501", // 父页面
    "1": "http://127.0.0.1:5500" // 主页面
}