Iframe标签的传值方式

 一、iframe标签的使用

<iframe 
style={{border:0,width:"100%",height:630,}} 
src={src}
/>

1. 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息）

方法一： 直接通过获取父或者子的window来操作 （限制： 必须同域）

// 父调用子的方法：
 this.iframe.contentWindow.iframe的属性方法
// 或
document.getElementById("myIframe").contentWindow.iframe的属性方法

// 子调用父的方法：通过parent直接获取父的window
parent.document...

方法二：通过postMessage进行通信（限制： 需要父子约定）

// 父监听子消息：
window.addEventListener("message", () => this.listenFunc());

// 子发给父消息： 可通过window的属性找到对应的父（这里的parent表示直接上一级的父）
parent.postMessage(data, "*");  


// 父给子发消息
document.getElementById("iframe").contentWindow.postMessage(JSON.stringify(data), "*")

// 子监听父的消息
window.addEventListener("message", () => this.listenFunc());

1. 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听

   while(true) {
       // 判断，找到要找的父window，可以通过在父的window上绑定属性来实现
   　　if(currentWindow.isParent = true) {　　
   　　　　currentWindow.postMessage(data, "*")
   　　}
   
   　　if(currentWindow == window.top) {
   　　　　break;　　// 防止死循环
   　　} else {
   　　　　currentWindow = currentWindwo.parent;
   　　}
   }

2. origin是否有用event.origin 可以获取当前消息的来源路径，通过判断当前iframe的url，判断是否是指定页面的消息来源

此文章仅用作学习总结，来源于该处链接，如有冒犯，侵权必删