如何使用 React Native 监控 webview 文档标题的变化

Question

我基本上是尝试在我的 webview 中的文档标题发生变化时立即调用 react native 中的函数。我已经使用以下代码获得了在我的网络视图中显示的网页的 document.title：

  handleMessage(message) {
    alert(message.nativeEvent.data);
  }

  render() {
    return (
      <WebView
        source={{ uri: "https://website.com/" }}
        injectedJavaScript="window.postMessage(document.title)"
        onMessage={this.handleMessage}
      />
    )
  }

现在我想监视标题的变化并在发生变化时立即调用一个函数。我该怎么做？

Answer 1

我来这里是为了寻找同一问题的解决方案，但在 Whosebug 上找不到。我的确切要求是从 WebView 读取标题并在其他地方的文本框中更新它，这就是我解决它的方法，

我注入的 javascript 监视 WebView 中 URL 的变化，并在有变化时调用 postMessage。

这是我注入的脚本：

window.currentloc = location.href;
setInterval(function() {
    if (window.currentloc != location.href) {
        window.currentloc = location.href;
        window.postMessage('$#doctitle-' + document.title);
    }
}, 500);

我还在我的消息前添加了 $#doctitle- 前缀，以避免处理来自我的 WebView 的所有消息。

我的组件如下所示：

<WebView
     ref={r => (this.webview = r)}
     style={{ flex: 1 }}
     injectedJavaScript="window.currentloc = location.href;setInterval(function() {if (window.currentloc != location.href) {window.currentloc = location.href;window.postMessage('$#doctitle-' + document.title);}}, 500);"
     javaScriptEnabled={true}
     onMessage={this.handleMessage.bind(this)}
     onNavigationStateChange={this.onNavigationStateChange.bind(this)}
     source={{
     uri: 'https://website.com',
   }}
/>

我的消息处理代码：

handleMessage(event) {
        if(event.nativeEvent.data && event.nativeEvent.data.indexOf("$#doctitle-")==0){
          this.setState({
            windowTitle: event.nativeEvent.data.split('-')[1]
          });
        }
}

Answer 2

这是一个老话题，但也许会对某人有所帮助。

第一个可以找到标题的地方是onLoadProgress函数。但是（至少在 Android 上）它 return 的前一页标题（看起来像库中的错误）- 示例：假设存在多步流程，A -> B -> C -> D，如果我们从 B 前进到 C，onLoadProgress 来自 B 的 return 头衔，如果我们从 C 回到 B，它会 return 来自 C.

的头衔

export const MyWebView = () => {

    const handleOnLoadProgress = (event) => {
        const {title} = event.nativeEvent;
        console.log('title', title);
    };

    return <WebView
        source={{uri: 'www.google.com'}}
        onLoadProgress={handleOnLoadProgress}
    />;
}

还有其他解决方案（从@Muthukrishnan 的回答中复制并增强了一点）利用 onMessage:

import React from 'react';
import { WebView, WebViewMessageEvent } from 'react-native-webview';

const POLL_FOR_UPDATES = `
  setInterval(function() {
    window.ReactNativeWebView.postMessage('interval_update');
  }, 2000);
`;

export const MyWebView = () => {

    const handleMessage = (messageEvent: WebViewMessageEvent) => {
        const {title} = messageEvent.nativeEvent;
        console.log('title', title);
    };

    return <WebView
        javaScriptEnabled={true}
        injectedJavaScript={POLL_FOR_UPDATES}
        source={{uri: 'www.google.com'}}
        onMessage={handleMessage}
    />;
}

看起来不是最好，因为必须在后台进行轮询，但效果很好。

如何使用 React Native 监控 webview 文档标题的变化

How to monitor changes in webview document title with react native

javascript

onchange

react-native