Question

这是我尝试对其进行测试的简单WebView。以下代码在控制台中返回以下内容：

Handle Load Start
Handle Load
Handle Load End
Handle Load Start
{"listening":"Sup"}

export default class SimpleWebview extends React.Component {
  handleOnLoadStart = e => {
    console.log(`Handle Load Start`)
  }

  handleOnLoad = e => {
    console.log(`Handle Load`)
  }

  handleOnLoadEnd = e => {
    console.log(`Handle Load End`)
  }

  handleError = e => {
    console.log(`Handle Error`)
  }

  handleMessage = e => {
    const { data } = e.nativeEvent
    console.log(data)
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View
          style={styles.webviewWrapper}
          ref={webviewRef => {
            this.webviewRef = webviewRef
          }}
        >
          <WebView
            ref={webView => {
              this.webView = webView
            }}
            source={{ html: '<h1>Simple webview</h1>' }}
            javaScriptEnabled
            injectedJavaScript={`window.postMessage(JSON.stringify({ listening: 'Sup' }), '*')`}
            onLoad={this.handleOnLoad}
            onLoadEnd={this.handleOnLoadEnd}
            onLoadStart={this.handleOnLoadStart}
            onMessage={this.handleMessage}
            startInLoadingState
          />
        </View>
      </SafeAreaView>
    )
  }
}

据我了解，injectedJavascript是在Webview完成加载后执行的，但是，我不确定为什么它调用onLoadStart方法。那不会引入无限循环吗？

我正在尝试在Webview和应用程序之间建立连接，在这里我可以在不同时间调用方法，并且它将在Webview中执行某些功能。

我想念什么吗？

Answer 1

Onload，OnloadStart或OnloadEnd中只有一个。

您不必全部使用它。

有关组件，请参阅manual。

onMessage用于在Web上查看网络消息。

examplewebview.js：

onLoadEnd() {
    const user = this.state.messageusername;
    const data = { messageType: "webview", user }; 
    this.webview.postMessage(JSON.stringify(data));

  }

webListener：

window.onload = function() {
            document.addEventListener('message', function(e) {

              let tes = JSON.parse(e.data);

          alert(tes.data);

});
}

React Native WebView onMessage调用使WebView无法执行onLoadEnd

1 个答案: