injectJavaScript在反应原生Webview中不工作

问题描述：

我无法将这个简单的js代码注入react-native webview。injectJavaScript在反应原生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 }} />; 
    } 
}

答

的问题是，因为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; 
}

不能工作。我尝试了很多格式。关于配置的一些细节：平台：Android 6，SDK：23/24，react-native版本：0.49.3。 –

当您在iOS/Android中运行react-native时，您能看到WebView吗？因为如果你看不到WebView，那么问题可能不是你的Javascript代码。 @KapilYadav –

我在这里发布的代码可以在webview中成功打开google.com或任何其他网站，但我看不到警报。如果我在源代码中使用HTML而不是URI，那么它将很好地工作。在你的设备上？@ Mateo Guzman。 –

答

好了，你在这里有一个以上的问题。第一个是你的web视图需要用flex包含在一个包含View的组件中：1.其次，injectJavascript只接受一个字符串 - 而不是一个函数。第三，你似乎试图将hello作为一个变量来使用，而不是定义它，或者如果它是一个字符串，而不是你的语法需要像这样：injectJavascript = {'alert（“hello”）'}。此外，当视图加载时注入JavaScript已经被触发，所以如果这是你打算做的事情，那么你们都很好。您可以在Web视图开始加载时注入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> 
    ) 
    } 
}

injectJavaScript在反应原生Webview中不工作

相关推荐