React Native Webview how to use injectJavascript

Question

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

Ankit Makwana · Accepted Answer · 2018-03-14 13:30:46Z

19

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

edited Mar 14, 2018 at 13:30

answered Mar 14, 2018 at 12:21

Ankit Makwana

2,56116 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

inoutwhy · Accepted Answer · 2019-12-28 02:35:00Z

15

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

edited Dec 28, 2019 at 2:35

answered May 7, 2018 at 3:40

inoutwhy

6321 gold badge6 silver badges13 bronze badges

Comments

Idan · Accepted Answer · 2020-07-23 07:19:33Z

0

You can do it with injectedJavaScript property in webview:

export default class app extends Component {
  constructor(props) {
    super(props);
    this.state = { webViewUrl: 'https://reactnative.dev' };
  }

render() {
    const jsCode = `document.querySelector('.HeaderHero').style.backgroundColor = 'purple';`;
    return (
      <View style={styles.container}>
        <WebView
          ref={ref => {
            this.webview = ref;
          }}
          source={{ uri: this.state.webViewUrl }}
          originWhitelist={['*']}
          javaScriptEnabledAndroid={true}
          injectedJavaScript={jsCode}
        />
      </View>
    );
  }
}

for full explanation with a code example: link_from_medium

answered Jul 23, 2020 at 7:19

Idan

4,1531 gold badge33 silver badges34 bronze badges

Collectives™ on Stack Overflow

React Native Webview how to use injectJavascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related