时间戳

首页 > 解决方案 > window.postMessage 不会将数据发送到 OnMessage WebView

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

问题描述

我在我的 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>
       }

您对显示我的消息数据有什么建议吗？

标签： react-nativewebviewpostmessage

解决方案

你是对的，你的代码似乎不能在 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

希望能帮助到你 ：）

推荐阅读