如何在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 变量注入到您的 WebView 中。然后，您可以像平常一样注入 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>
      );
    )

Answer 2

Brian F 的回答非常棒，对我帮助很大。只是缺少一件事。您需要将 ReactNativeWebView 附加到 postMessage 函数。

所以看起来像

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

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

Answer 3

根据我的经验，它会很好用，因为我尝试过从亚马逊、淘宝、乐天获取产品信息。

_onMessage = (message) => {
  // you can put processing code here.
}


render (
      const jsCode = "window.ReactNativeWebView.postMessage(document.getElementsByClassName("class name"))"
      // or you can use `document.querySelector("element query")` instead of `document.getElementsByClassName("class name")`
    
      return (
         <View style={styles.container}>
             <WebView
                 source={{uri: "url here"}}
                 onMessage={this._onMessage}
                 injectedJavaScript={jsCode}
             />
         </View>
      );
    )

Answer 4

对于那些还没有得到的人，请尝试最新的react-native

    window.ReactNativeWebView.postMessage(document.getElementById('id_here').innerHTML);

const INJECT_JS = `window.ReactNativeWebView.postMessage(document.getElementById('id_here').innerHTML);
alert("Hel0....")
`

  return (
     <View style={styles.container}>
         <WebView
             source={{uri: "http://..."}}
         onMessage={event => {
          console.log(event.nativeEvent.data);
        }}
             injectedJavaScript={INJECT_JS }
         />
     </View>
  );

Answer 5

<WebView
    source={{html: "<span class="price bold some-class-name">$459.00</span>"
/>

或者您可以将模板调整为常量，然后执行以下操作：

const HTMLTemplate = `<span class="price bold some-class-name">$459.00</span>`;

<WebView
    source={{html: HTMLTemplate}}
/>