Question

我试图访问第三方网页的HTML源代码，以读取以反应原生方式加载到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和Read特定DOM元素值中获取页面的当前HTML源代码？

Answer 1

看起来在React Native v0.37中添加了此功能。添加onMessage参数会将postMessage变量注入WebView。然后你就可以正常注入JavaScript，选择你的元素并将它postMessage回来。

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

<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}}
/>

Answer 3

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

如何在本机中获取WebView对象的html源代码

3 个答案: