React-Native How can I get title from WebView when loading a url

Question

I want to get title of url from webView in react-native.

For example: I can get title of url from webView in iOS

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    titleLabel.text = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
｝

I did not find any solutions so far, so Is there anyone have some ideas?

score 5 · Accepted Answer · answered Nov 09 '17 at 11:41

5

I'm not sure whether this is the cleanest solution but you can inject some JavaScript into WebView to get some data, and then pass it back.

handleMessage(message) {
  console.log(message.nativeEvent.data);
}

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

References:

answered Nov 09 '17 at 11:41

designorant

2,222
13
24

Hey I need to contact you for react native. Can you please ping me ok skype. skype. beingshashi05 – BeingExpert Nov 09 '17 at 13:15
injecting js to websview is no longer possible – webchun Sep 19 '19 at 03:52
1

@webchun seems like it is. https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#injectedjavascript – Ugur Eren Dec 31 '19 at 16:43
1

I had to use: `injectedJavaScript={"window.ReactNativeWebView.postMessage(myjscode)"}` – Rodney Salcedo May 20 '21 at 15:00

score 0 · Answer 2 · answered Nov 09 '17 at 11:37

You can use injectJavaScript or injectedJavaScript props to inject Javasctipt code to the URLs that you load and get title of the page. Take a look at this answer to learn how to get tile with javascript.

Then when you acquire title you can use onMessage prop to pass to react-native side.

React-Native How can I get title from WebView when loading a url

2 Answers2