iframe的使用和 contentWindow、parent以及postMessage通信方式

问题：

如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法；子发给父，父接收子的消息；）
如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听

一、iframe的使用

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

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

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

// 父调用子的方法：this.iframe.contentWindow.iframe的属性/方法
// 或
document.getElementById("myIframe").contentWindow.iframe的属性/方法// 子调用父的方法：通过parent直接获取父的window
parent.document.的属性/方法

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

// 父监听子消息：window.addEventListener('message',function(event){...})
// 子发给父消息： 可通过window的属性找到对应的父（这里的parent表示直接上一级的父）
//嵌套一层使用window.top(parent),多层window.frameElement,
//使用top而不是window，top指向iframe最顶层窗口
window.top.postMessage(msg,'父窗口源');
parent.postMessage(data, "*");  // 父给子发消息
document.getElementById("iframe").contentWindow.postMessage(msg,'子窗口源')
iFrame.onload = function(){
//iframe加载完立即发送一条消息
iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'*');
}
// 子监听父的消息
window.addEventListener("message", (e) => this.listenFunc(e));

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

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

origin是否有用

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

二、React Native的WebView和子内容的通信

// RN的WebView
<WebViewref={ref => this.webview = ref}source={{uri: ...}}javaScriptEnabled={true}onMessage={this.handleMassage}allowFileAccess={true}onLoadStart={}onLoadEnd={}
/>

监听接收web（子）发送的消息

// 接收web发送的消息
handleMessage(event) {const data = JSON.parse(event.nativeEvent.data);const code = data.code;const msg = data.msg;switch(code) {case 0:console.log(msg);break;}
}

web（子）发消息给react native

// web发消息给react native
const data = {code: code, msg: msg};
window.ReactNativeWebView.postMessage(JSON.stringify(data));

React Native（父）发送消息给web（子）

// 发送消息给web
sendMessageToWebView(code, msg) {const data = {code: code, msg: msg};if(this.webview) {this.webview.postMessage(JSON.stringify(data));} else {console.log("no webview ref")}
}

web（子）对React Native（父）消息的监听

// web监听react native的postMessage消息，必须有document, 否则监听不到消息
window.document.addEventListener("message", this.onMessageListener.bind(this));onMessageListener(event) {const data = JSON.parse(event.data);const code = data.code;const msg = data.msg;switch(code) {case ...}
}

三、 android的webview和包含内容的通信（仅做简单介绍）

agentWeb 相对于webview的使用

android 中可以定义当前的window下的名称，

web可以使用类似window.WebAppInterface.onPostMessage(JSON.stringify(data))来发消息，WebAppInterface需要在Android中定义

综上：

web的iframe之间，web和RN的webview之间，web和android之间的通信，都是使用message进行监听的，需要关注消息来源，否则如果有多个同类型不同类型的消息，很容易引起监听的冲突混淆

针对消息的发送，三种类型各不相同，但是多个同类型之间需要做好区分，否则依然有冲突混淆的问题

iframe的使用和 contentWindow、parent以及postMessage通信方式相关推荐

iframe中跨域页面访问parent的方法
背景如上图所示,系统www.a.com/index.html页面中嵌入一个iframe,iframe中访问不同域的www.b.com/index.html 然后b中有个按钮"保存" ...
关于iframe的contentDocument和contentWindow
contentDocument是获得iframe子窗口的document对象,但兼容ff和ie8+ contentWindow是获得子窗口的window对象,兼容大部分浏览器,contentWindo ...
前端十五道html面试题
目录 01.说一下对语义化的理解?✅ 02.说一下iframe有哪些优点和缺点?✅ 03.DOCTYPE的作用?严格模式和混杂模式的区别? 04.说一下渐进增强和优雅降级的区别? 05. <!D ...
使用iframe+postMessage跨域操作和通信
使用iframe+postMessage跨域操作和通信场景 1. http://XXX/a.html(自己的)页面要操作http://YYY/b.html(其他域名的) 2. 看了网上很多都是同域名 ...
vue页面内嵌iframe使用postMessage进行跨域通信
跨域关于跨域的详细资料:跨域,这里只需要明确什么情况下跨域了(等同于两个url什么情况下是非同源关系). 协议.域名.端口三者有其一不同,就算是跨域,就算是非同源本地环境模拟借助phpstudy ...
iframe 父子页面传值 postMessage
使用postMessage给父子页面传值,可以解决跨域问题父传子:iframe.contentWindow.postMessage() 子传父:尽量放在window.onload里面.window. ...
frame或者iframe的contentwindow属性
contentwindow属性是指指定的frame或者iframe所在的window对象: <script> function fnnavigate() { for(i=0;i<do ...
iframe.contentWindow
1.iframe.contentWindow(主页面调用iframe) 此处的iframe是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由 ...
iframe.contentWindow 属性：关于contentWindow和contentDocument区分
定义和用法 contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象. 语法:frameObject.content ...

iframe的使用和 contentWindow、parent以及postMessage通信方式

iframe的使用和 contentWindow、parent以及postMessage通信方式相关推荐

最新文章

热门文章