Реагирование на собственный вызов WebView onMessage останавливает выполнение WebView onLoadEnd

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 выполняется после того, как веб-просмотр завершил загрузку, однако я не уверен, почему он вызывает метод onLoadStart. Разве это не вводит бесконечный цикл?

Я пытаюсь установить соединение между веб-представлением и приложением, где я могу вызывать методы в разное время, и оно будет выполнять определенные функции в веб-представлении.

Я что-то упустил?

Answer 1

Только один из Onload, OnloadStart или OnloadEnd.

Неважно, нужно ли вам использовать все это.

Пожалуйста, обратитесь к руководству для компонентов.

onMessage используетсякогда веб-сообщения отправляются в Интернет.

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);

});
}