如何在flutter webview中收听事件？

Question

如何在flutter webview中收听事件？

Har*_*n R 5 flutter flutterwebviewplugin

当用户单击 webview 中存在的按钮时，我想关闭我的 flutter 应用程序中的 webview

这是显示webview的代码

class WebViewApp extends StatefulWidget {
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return  WebviewScaffold(url: 'https://google.com',
        appBar: AppBar(
          title: Text('Test'),
          centerTitle: true,
          backgroundColor: kBlue,
          leading: BackButton(
            onPressed: (){
              Router.navigator.pop();
            },
          )
        ),
      );
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

obl*_*mov 10

WebView您可以通过检查即将打开的网址来收听点击声：

WebView(
  initialUrl: 'https://google.com',
  navigationDelegate: (request) {
    if (request.url.contains('mail.google.com')) {
      print('Trying to open Gmail');
      Navigator.pop(context); // Close current window
      return NavigationDecision.prevent; // Prevent opening url
    } else if (request.url.contains('youtube.com')) {
      print('Trying to open Youtube');
      return NavigationDecision.navigate; // Allow opening url
    } else {
      return NavigationDecision.navigate; // Default decision
    }
  },
),

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ris*_*esh 6

请检查以下步骤以在单击 WebView 中的按钮时获取触发器：

添加 webview 插件

webview_flutter: ^0.3.22+1
增加了资产的参考 pubspec.yaml
```
 assets:   
    assets/about_us.html
```
Run Code Online (Sandbox Code Playgroud)
在assets文件夹中添加了html文件

about_us.html

<html>

<head>
    <script type="text/javascript">
        function invokeNative() {
            MessageInvoker.postMessage('Trigger from Javascript code');
        }
    </script> </head>

<body>
    <form>
        <input type="button" value="Click me!" onclick="invokeNative()" />
    </form> </body>

</html>

Run Code Online (Sandbox Code Playgroud)

添加了加载 WebView 的代码。

根据以下语句，您可以看到我正在加载一个 WebView，当我单击名为Click me!的按钮时！在 WebView 中，flutter 中的 JavascriptChannel 将被调用，并显示一条消息“从 Javascript 代码触发”

import 'dart:convert';
import 'package:flutter/material.dart'; 
import 'package:flutter/services.dart'; 
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {
  WebViewApp({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  WebViewController _controller;
  Future<void> loadHtmlFromAssets(String filename, controller) async {
    String fileText = await rootBundle.loadString(filename);
    controller.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
  Future<String> loadLocal() async {
    return await rootBundle.loadString('assets/about_us.html');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<String>(
        future: loadLocal(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return WebView(
              initialUrl:
                  new Uri.dataFromString(snapshot.data, mimeType: 'text/html')
                      .toString(),
              javascriptMode: JavascriptMode.unrestricted,
              javascriptChannels: <JavascriptChannel>[
                JavascriptChannel(
                    name: 'MessageInvoker',
                    onMessageReceived: (s) {
                    Scaffold.of(context).showSnackBar(SnackBar(
                       content: Text(s.message),
                    ));
                    }),
              ].toSet(),
            );
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
        },
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

正如您在代码中看到的，JavascriptChannel当用户单击 webview 中的按钮时，会调用一个。有一个键可以识别在我的情况下是MessageInvoker.

希望这能解决问题......

归档时间：	5 年，3 月前
查看次数：	4825 次
最近记录：	4 年，3 月前