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

【问题标题】：window.postMessage doesn't send the data to OnMessage WebViewwindow.postMessage 不会将数据发送到 OnMessage WebView
【发布时间】：2019-05-21 23:45:09
【问题描述】：

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

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

【问题讨论】：

您已将脚本命名为 InjectScript1，但在 WebView 上您将其用作 Script1。尝试注入JavaScript={InjectScript1} 看看它是否有效
对不起！是的，我试过了，但它不起作用

标签： react-native webview postmessage

【解决方案1】：

您是对的，您的代码似乎在 Android 上无法运行，但在 iO 上运行良好......

这是一个奇怪的问题，它看起来好像 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

希望对你有帮助:)

【讨论】：

感谢您的帮助我尝试了您的解决方案，但它对我不起作用我真的很困惑，因为我找不到问题到底出在哪里
抱歉回复晚了，你试过我回答中的零食吗？如果您打开它，请打开页面底部的日志控制台，每次您尝试输入输入时，它都会显示您通过 postMessage 发送的数据。另外，您是在 iOS 还是 Android 上尝试这个？
早上好，谢谢您的回复。是的，我尝试了零食控制台，它正在记录数据，但是使用可视代码，在 chrome 浏览器上编译的相同代码在其控制台上没有显示任何内容
你知道它有效，但是当我删除 window.postMessage 时。所以问题肯定来自 window.postMessage
这很奇怪...也许不是 console.log 而是发出警报，并尝试在真实设备上运行它。对我来说它有效，唯一的问题是它在窗口加载时不起作用，它需要一个计时器或一个特殊事件，如 onFocus 才能被调用。

【解决方案2】：

改变这个

window.postMessage(JSON.stringify(data))

到这里

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

【讨论】：