React Native WebView postMessage不起作用 [英] React Native WebView postMessage does not work
问题描述
我无法让React Native WebView postMessage工作。 React Native应用程序成功从Web应用程序接收post message messaget。但是，该网络应用程序不会从React Native应用程序接收消息发送。
I can't get React Native WebView postMessage to work. The React Native app successfully receives the post message sendt from the web app. But the web app does not receive messages sendt from the React Native app.
我的简单网络应用程序
<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>
此网络应用程序托管于： https://popping-heat-6062.firebaseapp.com/
This web app is hosted at: 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 );
预期结果
- 点击从网上发送消息按钮，将
a发布消息发送到React Native应用程序并登录调试器
窗口 - 点击从React Native发送帖子消息按钮
向网络应用发送一条消息并打印在网络上
textarea
实际结果
- 网络应用成功将发送消息发送到React Native应用程序并记录在调试器窗口中
- React Native应用程序不成功将消息发送到Web应用程序并且不会打印出来web textarea
- Web app successfully sends sends message to React Native app and is logged in the debugger window
- React Native app unsuccessfully sends message to web app and is not printed out in the web textarea
有谁知道为什么网络应用没有收到消息？
Does anyone know why the web app is not receiving the messages?
使用Android和iOS进行测试。
Tested with both Android and iOS.
相关文档： HTTPS：//facebook.g ithub.io/react-native/docs/webview.html
编辑：经验丰富的行为可以查明问题。
Edit: Experienced a behaviour that may pinpoint the problem.
当直接在网络浏览器中测试从网上发送邮件按钮时，textarea会记录它发送的内容消息，也是收到它自己的消息。
When testing the 'Send post message from web' button directly in a web browser the textarea logs that it has sendt the message and also that is received it's own message.
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只打印出来
when trying the same in the WebView from the React Native app the textarea only prints out
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
WebView是否劫持了window.postMessage方法并注入了一个自定义方法？
Does the WebView hijack the window.postMessage method and inject a custom one?
这在文档：
设置此属性会在您的
webview中注入postMessage全局，但仍会调用postMessage的预先存在的值。
Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.
也许这是假的，问题出在哪里？
Maybe this is false and this is where the problem is at?
推荐答案
我遇到了同样的问题并通过将事件监听器添加到文档而不是窗口来修复它。更改：
I had the same problem and fixed it by adding the event listener to the document instead of the window. Change:
window.addEventListener("message", ...
to：
document.addEventListener("message", ...
这篇关于React Native WebView postMessage不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
