web-dev-qa-db-fra.com

Exécutez du Javascript dans Flutter Webview

comment je peux exécuter Javascript dans le flutter_webview_plugin. Je l'essaie avec ça.

onPressed: () {
   flutterWebviewPlugin.evalJavascript('<script language="JavaScript" type="text/javascript">alert("Hello World")</script>');
},

Mais rien ne se passe.

Je pense qu'avec flutterWebviePlugin.evalJavascript, il est possible d'exécuter Javascript dans une vue Web. Ai-je tort?

javascriptwebviewdartflutter
6
Art

Eh bien, rien ne s'est passé car flutter webview ne prend pas en charge la fonction d'alerte javascript. Essayez d'écrire une fonction javascript qui modifie la valeur du innerText d'un élément HTML, puis appelez la fonction à l'aide de .evalJavascript pour voir le résultat.

1
alexdabest

J'ai débogué avec une partie iOS de flutter_webview_plugin.

Pour la partie iOS

Trouvé, il est lié à la partie native iOS iOS WKWebView ne montrant pas la boîte de dialogue d'alerte javascript () .

Un bon exemple de code d'implémentation est à Gist .

J'ai créé un fix pour cela.

Solution temporaire

Vous pouvez utiliser

flutter_webview_plugin:
    git:
      ref: "dev/fix_alert_not_work_in_webview"
      url: "https://github.com/jerryzhoujw/flutter_webview_plugin"
      source: git

cela comme temp dans pubspec.yaml avant la fusion PR .

0
JerryZhou

Vous pouvez utiliser mon plugin flutter_inappwebview , qui est un plugin Flutter qui vous permet d'ajouter des WebViews en ligne ou d'ouvrir une fenêtre de navigateur dans l'application et qui possède de nombreux événements, méthodes et options pour contrôler les WebViews.

Pour exécuter certains js, vous pouvez utiliser:

  • Future<dynamic> evaluateJavascript({@required String source}): évalue le code JavaScript dans la WebView et renvoie le résultat de l'évaluation.
  • Future<void> injectJavascriptFileFromUrl({@required String urlFile}): injecte un fichier JavaScript externe dans WebView à partir d'une URL définie.
  • Future<void> injectJavascriptFileFromAsset({@required String assetFilePath}): injecte un fichier JavaScript dans la WebView à partir du répertoire d'actifs flutter (voir plus ici sur la façon de charger un fichier à partir du dossier d'actifs).

Exemple complet:

import 'Dart:async';

import 'package:flutter/material.Dart';

import 'package:flutter_inappwebview/flutter_inappwebview.Dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://www.example.org/",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) async {
                      int result1 = await controller.evaluateJavascript(source: "10 + 20;");
                      print(result1); // 30

                      String result2 = await controller.evaluateJavascript(source: """
                        var firstname = "Foo";
                        var lastname = "Bar";
                        firstname + " " + lastname;
                      """);
                      print(result2); // Foo Bar

                      // inject javascript file from an url
                      await controller.injectJavascriptFileFromUrl(urlFile: "https://code.jquery.com/jquery-3.3.1.min.js");
                      // wait for jquery to be loaded
                      await Future.delayed(Duration(milliseconds: 1000));
                      String result3 = await controller.evaluateJavascript(source: "\$('body').html();");
                      print(result3); // prints the body html

                      // inject javascript file from assets folder
                      await controller.injectCSSFileFromAsset(assetFilePath: "assets/myJavascriptFile.js");
                    },
                  ),
                ),
              ),
            ]))
    );
  }
}
0
Lorenzo Pichilli