it-swarm.com.de

injectedJavaScript funktioniert in WebView von native nicht

Ich kann diesen einfachen js-Code nicht in den reaktionsnativen Webview einfügen.

Ich habe auf diesen Link auch verwiesen, aber hier keine Lösung angegeben.

Dann habe ich dieses gefunden, das für HTML-Requisiten funktioniert, aber nicht für 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 }} />;
  }
}
4
Kapil Yadav

Nun, Sie haben hier mehr als eine Ausgabe. Erstens muss Ihre Webansicht in eine umfassende View-Komponente mit flex eingebunden werden: 1. Zweitens akzeptiert injedJavascript nur eine Zeichenfolge - keine Funktion. Drittens scheint es so, als würden Sie versuchen, hallo als Variable zu verwenden, ohne sie zu definieren, oder wenn es sich um eine Zeichenfolge handelt, muss Ihre Syntax ungefähr so ​​aussehen: injectedJavascript = {'alert ("hello")'}. Außerdem wird injedJavascript bereits ausgelöst, wenn die Ansicht geladen wird. Sie sind also alle dort gut, wenn Sie dies tun möchten. Sie können Javascript injizieren, wenn die Webansicht mit dem Laden der Requisiten onLoadStart und injectJavascript geladen wird. Die Implementierung ist jedoch ganz anders. Dies ist eine andere Frage. Versuchen Sie diesen 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>
   )
  }
}
5
bagofcole

Ich bin auch auf dieses Problem gestoßen und konnte es durch die Einstellung von mixedContentMode zum Laufen bringen:

mixedContentMode = {'Kompatibilität'}

siehe unten wo props.url = {uri: ' https://google.com '} der JavaScript-Schnelltest "schaue mich an, ich injiziere" in das Suchfeld.

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

Ich gehe davon aus, dass das Problem besteht, wenn Sie Ihre HTML-Datei direkt hinzufügen und Javascript injizieren, dass der Webview die Injektion als Javascript aus demselben Ursprung betrachtet. Anders als wenn Sie eine Seite über eine URL laden, wo Ihr Javascript fremd ist und durch den Standardwert von mixedContentMode, der "never" ist, außerhalb von Origin betrachtet wird.

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

mixedContentMode Gibt den Modus für gemischten Inhalt an. WebView ermöglicht es einem sicheren Origin, Inhalte aus einem anderen Origin zu laden.

Mögliche Werte für mixedContentMode sind:

'never' (Standardeinstellung) - WebView lässt nicht zu, dass ein sicherer Origin-Inhalt aus einem unsicheren Origin geladen wird. '' Immer '- WebView erlaubt einem sicheren Origin, Inhalte aus einem anderen Origin zu laden, selbst wenn dieser Origin unsicher ist. 'Kompatibilität' - WebView wird versuchen, hinsichtlich des gemischten Inhalts mit dem Ansatz eines modernen Webbrowsers kompatibel zu sein.

1
Glorifundel

Das Problem ist, dass der Javascript-Code nach dem vollständigen Laden der Variable WebView ausgeführt werden muss.

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

Sie können setTimeout verwenden, um Ihren Javascript-Code einige Sekunden nach dem vollständigen Laden der WebView zu laden.

Ich empfehle Ihnen auch, `` anstelle von '' zu verwenden, damit Sie andere Variablen in Ihre Variable einfügen können.

Beispiel 

injectjs(){

    var message = "Hello";

    let jsCode = `alert('${message}')`;
    return jsCode;
}
0
Mateo Guzmán