Question

我无法将这个简单的js代码注入到反应原生的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

嗯，这里有多个问题。第一个是您的Web视图需要包含在包含Flex的包含View组件中：1。第二，injectJavascript只接受字符串 - 而不是函数。第三，似乎你试图在没有定义它的情况下使用hello作为变量，或者如果它是一个字符串，那么你的语法必须是这样的：injectJavascript = {'alert（“hello”）'}。此外，当视图加载时，injectJavascript已被触发，因此如果您打算这样做，那么您就会很好。你可以在网页视图开始加载时注入javascript，使用道具，onLoadStart和injectJavascript的组合，但实现是完全不同的，所以这是一个不同的问题。试试这段代码：

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

您需要添加 onMessage 道具。

enter image description here

Answer 3

我也遇到了这个问题，我可以通过设置mixedContentMode来实现它：

<强> mixedContentMode = { '兼容性'}

请参阅下面的props.url = {uri：'https://google.com'}快速测试javascript粘贴“看着我，我正在注入”搜索框。

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

我希望问题是当您直接添加html并注入javascript时webview将注入视为来自同一来源的javascript。与通过URL加载页面时不同，您的javascript是外来的，并且通过默认值mixedContentMode被认为是在原点之外，这是'never'

请参阅：https://facebook.github.io/react-native/docs/webview.html#mixedcontentmode

mixedContentMode 指定混合内容模式。即WebView将允许安全的来源加载来自任何其他来源的内容。

mixedContentMode的可能值为：

'never'（默认值） - WebView不允许安全来源从不安全的来源加载内容。 'always' - WebView将允许安全的来源加载来自任何其他来源的内容，即使该来源不安全。 '兼容性' - WebView将尝试与混合内容的现代Web浏览器方法兼容。

Answer 4

添加onMessage方法确实有效。

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 5

问题是因为Javascript代码需要在WebView完全加载后执行。

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

在setTimeout完全加载后几秒钟，您可以使用WebView加载您的Javascript代码。

此外，我建议您使用``代替''，并将其他变量放入变量中。

示例

injectjs(){

    var message = "Hello";

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

Answer 6

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!).

injectJavaScript在Webview中不起作用本机

6 个答案: