react-native - react native如何获取WebView对象的html源代码

Question

我正在尝试访问第 3 方网页的 HTML 源代码，以读取在 react-native 的 WebView 组件中加载的页面的特定 DOM 元素值。

<WebView
        source={{uri: 'https://www.amazon.com'}}
      />

并假设有一个这样的 DOM 元素:

<span class="price bold some-class-name">$459.00</span>

我也试过这个组件，但不能这样做:
https://github.com/alinz/react-native-webview-bridge

有没有办法在 WebView 中获取页面的当前 HTML 源代码并读取特定的 DOM 元素值？

Answer 1

看起来这个功能是在 React Native v0.37 中添加的。添加 onMessage 参数会将 postMessage 变量注入(inject)您的 WebView。然后，您可以像往常一样注入(inject) JavaScript，选择您的元素并将其发回消息。

render (
  const jsCode = "window.postMessage(document.getElementsByClassName("price bold some-class-name"))"

  return (
     <View style={styles.container}>
         <WebView
             source={{uri: "http://..."}}
             onMessage={this._onMessage}
             injectedJavaScript={jsCode}
         />
     </View>
  );
)