How to get the html source of WebView object in react native

Question

I'm trying to access the HTML source code of a 3rd party web page to read a specific DOM element value of a page which is loaded in WebView component in react-native.

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

and Suppose there's a DOM element like this:

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

I also tried this component but could not do that: https://github.com/alinz/react-native-webview-bridge

Is there any way to get the current HTML source code of page inside a WebView and Read specific DOM element value?

Answer 1

Looks like this functionality was added in React Native v0.37. Adding an onMessage parameter will inject a postMessage variable into your WebView. You can then just inject JavaScript as normal, select your element and postMessage it back.

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