window.postMessage 不会将数据发送到 OnMessage WebView

Question

我已经在我的反应本地组件中创建了一个WebView，然后我想使用Postmessage发送数据并通过Onmessage读取数据。我实际上不知道问题是否出现在我的帖子或网络浏览量的Onmessage选项中。你能告诉我问题在哪里吗？这是我的应用程序组件：

      let Script1 = `
      var data = {
      message : "OnFocusEvent"
        };
      window.postMessage(JSON.stringify({data}),"*");
         `;
     export default class App extends Component {
      constructor(props) {
      super(props);}
      render() {
       return (
       <View style={styles.container}>
      <RNEnhanceWebview
      ref={ref => (this.webView = ref)}
      style={{ flex: 1 }}
      source={{
        html:
          ' </br></br></br></br><form> <input id="input" class="input" 
      type="text" placeholder="name"/></form>'
      }}
      keyboardDisplayRequiresUserAction={false} //ios
      autoFocus={true} //android
      injectedJavaScript={Script1}
      automaticallyAdjustContentInsets={false}
      allowFileAccessFromFileURLs={true}
      scalesPageToFit={false}
      mixedContentMode={"always"}
      javaScriptEnabled={true}
      javaScriptEnabledAndroid={true}
      startInLoadingState={true}
      onMessage={event => {
        console.log(event.nativeEvent.data);
        console.log(JSON.parse(event.nativeEvent.data));
      }}
      onLoad={() => {}}
    />
      </View>
       }

您是否有任何建议显示我的消息数据？

Answer 1

您是对的，看来您的代码在Android上不起作用，但在iOS上工作正常...

这是一个奇怪的人，看上去好像是在首页加载上不起作用，但是如果您以延迟称呼它，例如onfocus，它可以按预期工作。

例如，尝试此脚本：

let Script1 = `
    document.getElementById("input").addEventListener("focus", function() {  
      var data = {
          type: "OnFocusEvent",
          message : "OnFocusEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });
    document.getElementById("input").addEventListener("blur", function() {  
      var data = {
          type: "OnBlurEvent",
          message : "OnBlurEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });
`;
onMessage={event => {
    console.log(event.nativeEvent.data);
    console.log(JSON.parse(event.nativeEvent.data));
    const messageData = JSON.parse(event.nativeEvent.data);
    const messageType = messageData.type;
    switch(messageType) {
        case "OnFocusEvent":
         console.log("Do whatever you want onFocus")
         break;
        case "OnBlurEvent":
         console.log("Do whatever you want onBlur")
         break;
        default:
         console.log("do nothing");
         break;
    }
}}

这是小吃上的示例：https：//snack.expo.io/rkanod9ln

希望它有帮助：）

Answer 2

更改此

window.postMessage(JSON.stringify(data))

到这个

window.ReactNativeWebView.postMessage(JSON.stringify(data))