iframe 页面间的通信(分享)

文章目录

1. 概述

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

2. 页面之间传递数据

<buttononclick="sendMessage()">发送消息</button><script>const iframe = document.querySelector("iframe");var data ={name:"rootPage",data:"我是主页面的数据"};functionsendMessage(){// 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"// 主页面}