Question

我试图通过注入帖子消息并在onMessage上监听它来获取网址的内容，但它无效。

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被反应原生实现覆盖。否则，您将使用默认的postMessage实现。 RN所做的是将window.postMessage替换为仅拥有一个参数的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属性存在差异。

injectJavaScript：允许您注入要在WebView上下文中执行的JavaScript代码。

custom-style：允许您注入在WebView上立即执行的JavaScript代码，没有返回值。

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

onMessage没有做出反应原生的工作

1 个答案: