javascript - onMessage 不能在 React Native 中工作

Question

我试图通过注入(inject)帖子消息并在消息上监听它来获取 url 的内容，但它不起作用。

render(){
const getHtmlJS = "window.postMessage(document.getElementsByTagName('head').innerHTML)";
return (
<View>
    <WebView
      source={{uri: this.state.url}}
      style={{flex: 1}}
      onMessage={(string) => this._onMessage(string)}
      injectedJavaScript={getHtmlJS}
    />
  </View>
)}

知道为什么这可能行不通吗？

Answer 1

等待 postMessage 被 react-native 实现覆盖。否则，您将使用默认的 postMessage 实现。 RN 所做的是用它自己的 postMessage 替换 window.postMessage，它只需要一个参数。看这里:

const SCRIPT = `
    function init() {
        postMessage('LOADED:');
    }
    function whenRNPostMessageReady(cb) {
        if (postMessage.length === 1) cb();
        else setTimeout(function() { whenRNPostMessageReady(cb) }, 1000);
    }
    if (document.readyState === 'complete') {
        whenRNPostMessageReady(init);
    } else {
        window.addEventListener('load', function() {
            whenRNPostMessageReady(init);
        }, false);
    }
`

class ScreenWidget extends Component {
    render() {
        return (
            <View style={styles.main}>
                <WebView source={{ uri:'https://www.duckduckgo.com' }} injectedJavaScript={SCRIPT} onMessage={this.handleMessage} />
            </View>
        )
    }

    handleMessage = ({nativeEvent:{ data }}) => {
        console.log('got message, data:', data);
    }
}

附带说明一下，injectJavaScript 和 injectedJavaScript 属性之间存在差异。

injectedJavaScript: lets you inject JavaScript code to be executed within the context of the WebView.

injectJavaScript: lets you inject JavaScript code that is executed immediately on the WebView, with no return value.

您可以在此处阅读更多相关信息 - https://medium.com/capriza-engineering/communicating-between-react-native-and-the-webview-ac14b8b8b91a