web-dev-qa-db-ja.com

Flutter WebviewでJavascriptを実行する

flutter_webview_pluginでJavascriptを実行する方法。これでやってみます。

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

しかし、何も起こりません。

私はflutterWebviePlugin.evalJavascriptを使用すると、WebviewでJavascriptを実行することができます。私はいくつか間違っていますか？

javascriptwebviewdartflutter
6
Art

まあ、フラッターwebviewはjavascriptアラート機能をサポートしていないため、何も起こりませんでした。 HTML要素のinnerTextの値を変更するJavaScript関数を記述してから、.evalJavascriptを使用して関数を呼び出し、結果を確認してください。

1
alexdabest

flutter_webview_pluginのiOS部分でデバッグしています。

IOSパーツの場合

IOSネイティブパーツに関連していることがわかりました iOS WKWebViewがjavascript alert（）ダイアログを表示していない 。

実装コードの良い例は Gist にあります。

fix を作成しました。

一時解

使用できます

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

これは、マージ前のpubspec.yamlのtempとして [〜＃〜] pr [〜＃〜] です。

0
JerryZhou

私のプラグイン flutter_inappwebview を使用できます。これは、インラインWebViewを追加したり、アプリ内ブラウザーウィンドウを開いたりすることができるFlutterプラグインであり、WebViewを制御するための多くのイベント、メソッド、およびオプションがあります。

一部のjsを実行するには、以下を使用できます。

  • Future<dynamic> evaluateJavascript({@required String source})：JavaScriptコードをWebViewに評価し、評価の結果を返します。
  • Future<void> injectJavascriptFileFromUrl({@required String urlFile})：定義されたURLから外部JavaScriptファイルをWebViewに挿入します。
  • Future<void> injectJavascriptFileFromAsset({@required String assetFilePath})：JavaScriptファイルをフラッターアセットディレクトリからWebViewに挿入します（アセットフォルダーからファイルをロードする方法については、詳細 here を参照してください）。

完全な例：

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