injectJavaScript在Webview中不起作用本机

Question

我无法将这个简单的js代码注入到反应原生的webview中.

我也提到了这个链接,但这里没有提供解决方案.

然后我发现这个适用于html道具但不适用于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

添加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 2

您需要添加 onMessage 道具。

Answer 3

那么,你在这里有多个问题.第一个是您的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 4

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

mixContentMode={'兼容性'}

请参阅下面的内容，其中 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 是外部的，并且被 mixContentMode 的默认值（“never”）视为在源之外

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

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

mixContentMode 的可能值为：

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