React Native WebView onMessage 和 postMessage 以获取所有网页答案

【问题标题】：React Native WebView onMessage and postMessage to get all web pageReact Native WebView onMessage 和 postMessage 以获取所有网页
【发布时间】：2017-10-31 17:00:39
【问题描述】：

我不太清楚如何实现onMessage 和postMessage，我可以获取整个网页，但只能从本机反应。

我的意思是，我将使用 injectedJavaScript 注入此代码

var markup = document.documentElement.innerHTML
window.postMessage(markup)

我将使用onMessage 收到结果。到目前为止我不能这样做是可能的原因吗

【问题讨论】：

标签： react-native webview

【解决方案1】：

是的，您可以做到这一点，您所要做的就是使用您的网页中的window.postMessage("message")，该网页将在WebView 中加载，您可以在onMessage 属性中看到该消息。

示例：

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state:{
            html:''
        }
    }
    componentWillMount(){
        this.setState({
            html : `<html>
    <head>
    <script>
    window.postMessage("Messga from webView")
    </script>
    </head>
    <body><h1>Hello from webView</h1></body>
    </html>`
        })
    }

    render(){
        return (
            <View style={{flex: 1}}>
                <WebView
                    ref={(reff) => {
                        this.webView = reff;
                    }}
                    source={{html: this.state.html}}
                    style={[styles.flex1, styles.padding5]}
                    onMessage={(event)=>{
                        let message  = event.nativeEvent.data;
                        /* event.nativeEvent.data must be string, i.e. window.postMessage
                        should send only string.
                        * */
                    }}
                    onNavigationStateChange={(evt)=>{}}
                    onError={(e) => {
                        console.warn('error occured', e)
                    }}/>
            </View>
        )
    }
}

我刚刚添加了一个示例 html 并将其呈现在 WebView 中，您可以在您将要在 WebView 中加载的页面中执行相同的操作。

或者另一种解决方案是：

您可以使用WebView 的injectedJavaScript 或injectJavaScript 属性，如here 所述。

【讨论】：

【解决方案2】：

postMessage 已弃用 :: 现在你必须使用 window.ReactNativeWebView.postMessage(data)

const injectedJavascript = `(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`;

对于一个组件的完整想象将是：

export const WebViewComponent = (props) => {
  const webViewScript = `
    setTimeout(function() { 
      window.ReactNativeWebView.postMessage(/*your pushed data back to onMessage 'event.nativeEvent.data'*/); 
    }, 2500);
    true; // note: this is required, or you'll sometimes get silent failures
  `;

  return (
    <WebView
      source={{
        uri: `https://example.com`,
      }}
      automaticallyAdjustContentInsets={false}
      scrollEnabled={false}
      onMessage={(event) => {
        // do something with `event.nativeEvent.data`
      }}
      javaScriptEnabled={true}
      injectedJavaScript={webViewScript}
      domStorageEnabled={true}
      style={{ width: "100%", height: /*webViewHeight*/ }}
    />
  );
};

【讨论】：

onMessage 我们可以通过注入脚本接收webview 中在webpage 上生成的任何操作吗？

【解决方案3】：

其实我正在查看文档，因为我使用了 react native 的 webview 的 injectJavascript 功能。在这里https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage，它说对于扩展，我们需要使用“*”作为属性。所以它不会是这样的“window.postMessage("Messga from webView")”

相反，它需要 window.postMessage("Messga from webView","*") 才能工作。

【讨论】：