Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Webview how to use injectJavascript

I'm trying to set a global variable within a webpage loaded by a react-native WebView. I'm trying to set the global variable using the injectJavascript prop, but I'm getting an error telling me that injectJavascript is expected to be a function.

How do I format the injectJavaScript function to pass a message on to the loaded webpage as a global variable? Thank you.

class Browser extends React.Component {

  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}
like image 220
Jon_B Avatar asked Mar 07 '18 19:03

Jon_B


People also ask

How do you pass data from react native to WebView?

Now, let's send data from a React Native app to WebView. Create a function called webviewRef and attach it to the WebView component. Next, create a function called sendDataToWebView and add the code below to it. Inside the “script” tag, use window.

How do I inject JavaScript in WebView react native?

Use injectJavaScript as per (Guide > Communicating between JS and Native > The injectJavaScript method)[https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#the-injectjavascript-method"]. In your case, that would be something like this. webview. injectJavaScript(jsCode)

Why we use WebView in react native?

WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!

Does react native support WebView?

React Native WebView is a modern, well-supported, and cross-platform WebView for React Native.


2 Answers

If you simply want to set global variable, you can use injectedJavaScript prop which will inject your js code into the web page when the view loads. Where you can simply pass js code as string.

And if you want to set global variable from any function then you can do the following: First of all take ref of webview.

<WebView
     ref={ref => (this.webview = ref)}
     ...
/>

then whenever you want to inject js code, do the following:

this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');

Have a look at link for reference.

https://snack.expo.io/Hke6dJFAW

like image 66
Ankit Makwana Avatar answered Sep 16 '22 20:09

Ankit Makwana


Please try this:

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`window.testMessage = "hello world"`}
/>

injectedJavaScript is the prop that injects JS into the web view, once, when it loads. This is what you seem to want.

How injectJavascript is used on the other hand? it's by calling it on the ref of the webview to inject more JS programmatically on the fly. In this case it could look something like this for example:

this.webview.injectJavascript(`window.reactComponent.forceUpdate();true;`)
like image 44
inoutwhy Avatar answered Sep 16 '22 20:09

inoutwhy