在 React Native 的 Webview 中，injectedJavaScript 不起作用

Question

I am not able to inject this simple js code into react-native webview.

I referred this link also but no solution provided here.

Then I found this one which works for html props but not uri.

import React, { Component } from 'react';
import { Platform,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class App extends Component<{}> {

  injectjs(){

    let jsCode = 'alert(hello)';
    return jsCode;
  }

  render() {
    return <WebView 
    javaScriptEnabled={true}
    injectedJavaScript={this.injectjs()} 
    source={{uri:"https://www.google.com"}} style={{ marginTop: 20 }} />;
  }
}

Answer 1

Well, you have more than one issue here. First one is your web view needs to be wrapped in a containing View component with flex: 1. Second, injectedJavascript only accepts a string - not a function. Third, it seems you are attempting to use hello as a variable without defining it, or if it is a string than your syntax needs to be something like this: injectedJavascript={'alert("hello")'}. Furthermore, injectedJavascript is already fired when the view loads so you are all good there if that's what you are intending to do. You can inject javascript when the web view starts loading though, using a combination of the props, onLoadStart and injectJavascript, but the implementation is quite different, so that's a different question. Try this code:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class App extends Component {

  render() {
    let yourAlert = 'alert("hello")'
    return (
     <View style={{flex: 1}}>
       <WebView
        javaScriptEnabled={true}
        domStorageEnabled={true}
        injectedJavaScript={yourAlert}
        source={{ uri: "https://www.google.com" }} style={{ marginTop: 20  }} />
    </View>
   )
  }
}

Answer 2

Add onMessage method does work.

import React, { Component } from 'react';
import { Platform,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return 
      <WebView 
        javaScriptEnabled={true}
        injectedJavaScript={'alert("hello")'} 
        source={{uri:"https://www.google.com"}} style={{ marginTop: 20 }}
        onMessage={(event) => {
          console.log('event: ', event)
        }}
      />;
  }
}

Answer 3

You need to add onMessage props.

Answer 4

I ran into this issue as well, and I was able to get it to work by setting mixedContentMode:

mixedContentMode={'compatibility'}

see below where props.url = {uri:' https://google.com '} quick test javascript pastes "look at me, I'm injecting" into the search box.

import React from 'react';
import { Button, StyleSheet, Text, View, ScrollView, WebView } from 'react-native';

export class WebViewController extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const url = this.props.url;
        console.log(`v:1`);
        console.log(`url info: ${JSON.stringify(url)}`);
        console.log(`javascript: ${Constants.javascript.injection}`);
        return (
            <View style={styles.root}>
                <WebView
                    source={url}
                    injectedJavaScript={Constants.javascript.injection}
                    mixedContentMode={'compatibility'}
                    javaScriptEnabled={true}
                    style={styles.webview}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    root: {
        flex:1,
        alignSelf: 'stretch',
    },
    webview: {
        flex:1,
        alignSelf: 'stretch',
    },
})

const Constants = {
    javascript: {
        injection: `
            Array.from(document.getElementsByTagName('input')).forEach((item) => {
                if(item.type == "search") {
                    item.value = "look at me, I'm injecting";
                }
            })
        `
    }
}

I expect the problem is when your adding your html directly and injecting javascript the webview considers the injection as javascript from the same origin. Unlike when you load a page through a url, where your javascript is foreign and is considered outside of the origin by the default value of mixedContentMode which is 'never'

see: https://facebook.github.io/react-native/docs/webview.html#mixedcontentmode

mixedContentMode Specifies the mixed content mode. ie WebView will allow a secure origin to load content from any other origin.

Possible values for mixedContentMode are:

'never' (default) - WebView will not allow a secure origin to load content from an insecure origin. 'always' - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure. 'compatibility' - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.

Answer 5

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#the-injectjavascript-method

follow this link 

The injectJavaScript method

While convenient, the downside to the previously mentioned 
injectedJavaScript prop is that it only runs once. That's why we 
also expose a method on the webview ref called injectJavaScript 
(note the slightly different name!).

Answer 6

The problem is because the Javascript code needs to be executed after the WebView load completely.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class App extends Component {

  injectjs() {

    let message = "Hello";

    let jsCode = `
      setTimeout(() => {
        alert('${message}');
      }, 1500)`;

    return jsCode;
  }

  render() {
    return <WebView
      javaScriptEnabled={true}
      injectedJavaScript={this.injectjs()}
      source={{ uri: "https://www.google.com" }} style={{ marginTop: 20 }} />;
  }
}

You can use setTimeout for load your Javascript code some seconds after the WebView loads completely.

Also, I recommend you to use `` instead of '' with it you can put other variables inside your variable.

Example

injectjs(){

    var message = "Hello";

    let jsCode = `alert('${message}')`;
    return jsCode;
}

Answer 7

Adding a empty ref & onMessage fixed this for me:

onMessage={(event) => {}}
ref={() => {}}

Answer 8

For anyone struggling with this in 2021, what I ended up having to do (pretty dirty solution but it worked), was to poll for the necessary dependencies I was injecting into the window object via injectedJavaScriptBeforeContentLoaded , and only running the rest of my code when they became available.

My solution ended up looking something like this:

function app () {
    // Continue to re-call self until frame data is available
    if (typeof window._rendererFrameData === 'undefined') {
        setTimeout(app, 250);
        return;
    }

    // Passed in from RN
    var size = window._rendererSize;
    var pixelSize = window._rendererPixelSize;

    // Picture data
    var frames = [];
    window._rendererFrameData.forEach(function(frameString) {
        frames.push(frameString.split(''));
    });
    var frameIndex = 0;

    var canvas = document.querySelector('canvas');
    canvas.setAttribute('width', size * pixelSize + 2);
    canvas.setAttribute('height', size * pixelSize + 2);
    document.body.setAttribute('width', size * pixelSize + 2);
    document.body.setAttribute('height', size * pixelSize + 2);
    

    var ctx = canvas.getContext('2d');
    
    // ... rest of renderer logic
}

app();

Note the if statement w/ setTimeout and return at the start. Basically it checks if my injected data is undefined, then queues the function to re-run in 250 milliseconds and bails out. This continues until the data is available.

Feels like a seriously bad case of band-aid solution, but it works for my app!