window.postMessage 没有将数据发送到 OnMessage WebView

Question

我在我的 react-native 组件中创建了一个 webview 然后我想使用 postMessage 发送数据并通过 OnMessage 读取它。我实际上不知道问题是在我的 postMessage 中还是在我的 webView 的 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 上运行良好......

这很奇怪，它看起来好像 postMessage 在第一个页面加载时不起作用，但如果你延迟调用它，比如 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))

window.postMessage 没有将数据发送到 OnMessage WebView

window.postMessage doesn't send the data to OnMessage WebView

postmessage

webview

react-native