极客观点
项目管理
HarmonyOS
我无法让 React Native WebView postMessage 工作。 React Native 应用程序成功接收到来自 Web 应用程序的发布消息 sendt。但是网络应用程序不接收来自 React Native 应用程序的消息。
我的简单网络应用程序
<html>
<body>
<button>Send post message from web</button>
<div>Post message log</div>
<textarea style="height: 50%; width: 100%;" readonly></textarea>
<script>
var log = document.querySelector("textarea");
document.querySelector("button").onclick = function() {
console.log("Send post message");
logMessage("Sending post message from web..");
window.postMessage("Post message from web", "*");
}
window.addEventListener("message", function(event) {
console.log("Received post message", event);
logMessage(event.data);
}, false);
function logMessage(message) {
log.append((new Date()) + " " + message + "\n");
}
</script>
</body>
</html>
此 Web 应用托管于： https ://popping-heat-6062.firebaseapp.com/
我的简单 React Native 应用程序
import React, {Component} from "react";
import {AppRegistry, Text, View, TouchableHighlight, WebView} from "react-native";
export default class WevViewApp extends Component {
constructor( props ) {
super( props );
this.webView = null;
}
onMessage( event ) {
console.log( "On Message", event.nativeEvent.data );
}
sendPostMessage() {
console.log( "Sending post message" );
this.webView.postMessage( "Post message from react native" );
}
render() {
return (
<View style={{flex: 1}}>
<TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() => this.sendPostMessage()}>
<Text style={{color: 'white'}}>Send post message from react native</Text>
</TouchableHighlight>
<WebView
style={{flex: 1}}
source={{uri: 'https://popping-heat-6062.firebaseapp.com'}}
ref={( webView ) => this.webView = webView}
onMessage={this.onMessage}
/>
</View>
);
}
}
AppRegistry.registerComponent( 'WevViewApp', () => WevViewApp );
预期结果
- 单击“从 Web 发送发布消息”按钮向 React Native 应用程序发送发布消息并在调试器窗口中登录
- 单击“从 React Native 发送帖子消息”按钮向 Web 应用程序发送帖子消息并在 Web 文本区域中打印出来
实际结果
- Web 应用程序 成功 发送消息到 React Native 应用程序并记录在调试器窗口中
- React Native 应用程序向 Web 应用程序发送消息 失败，并且未在 Web 文本区域中打印出来
有谁知道为什么网络应用程序没有收到消息？
测试了 Android 和 iOS。
相关文档： https ://facebook.github.io/react-native/docs/webview.html
编辑：经历了可能查明问题的行为。
当直接在 Web 浏览器中测试“从 Web 发送帖子消息”按钮时，textarea 记录它已发送消息以及接收到它自己的消息。
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Post message from web
当在 React Native 应用程序的 WebView 中尝试相同时，textarea 只打印出来
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
WebView 是否劫持 window.postMessage 方法并注入自定义方法？
文档 中提到了这一点：
设置此属性会将 postMessage 全局注入到您的 webview 中，但仍会调用 postMessage 的预先存在的值。
也许这是错误的，这就是问题所在？
原文由 Skarbo 发布，翻译遵循 CC BY-SA 4.0 许可协议
我有同样的问题并通过将事件侦听器添加到文档而不是窗口来修复它。改变：
至：