如何在flutter webview中收听事件？
我想要在用户单击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();
},
)
),
);
}
}
回答 3
Stack Overflow用户
发布于 2020-08-02 03:46:56
点击WebView中的按钮时，请检查以下获取触发器的步骤：
webview_flutter: ^0.3.22+1
- 在
pubspec.yaml中添加了asset的引用
资源: assets/about_us.html
- 在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>- 添加了加载WebView的代码。
根据下面的语句，您可以看到我正在加载一个WebView，当我单击名为click me的按钮时！在WebView中，flutter中的JavascriptChannel将通过消息"Trigger from Javascript code“被调用。
导入'dart:convert'；导入'package:flutter/material.dart'；导入'package:flutter/services.dart'；导入'package:webview_flutter/webview_flutter.dart'；类WebViewApp扩展StatefulWidget { WebViewApp({Key key，this.title})：super(key: key)；final String title；@override _WebViewAppState createState() => _WebViewAppState()；}类_WebViewAppState扩展状态{ WebViewController _controller；Future loadHtmlFromAssets(字符串文件名，控制器)异步{ String fileText = await rootBundle.loadString(文件名)；controller.loadUrl(Uri.dataFromString(fileText，mimeType：‘Encoding.getByName/ rootBundle.loadString('assets/about_us.html')；’，编码:Encoding.getByName(‘utf-8’).toString()；}未来loadLocal()异步{返回等待html} @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title)，)，body: FutureBuilder( 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( name：'MessageInvoker'，onMessageReceived：(s) { Scaffold.of(context).showSnackBar(SnackBar( content: Text(s.message)，))；})，.toSet()，)；} else if (snapshot.hasError) { return Text("${snapshot.error}")；} return CircularProgressIndicator()；}，)，//此逗号使构建方法的自动格式化更好。)；}}
正如您在代码中看到的，当用户单击webview中的按钮时，将调用一个JavascriptChannel。有一个键来标识通道，在我的例子中是MessageInvoker。
希望这能起到作用...
Stack Overflow用户
发布于 2021-06-24 01:40:02
您可以通过检查WebView即将打开的url来收听点击：
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
}
},
),Stack Overflow用户
发布于 2021-07-29 13:59:18
在Webview构造器中使用navigationDelegate参数。
WebView(
initialUrl: 'https://flutter.dev',
navigationDelegate: (action) {
if (action.url.contains('google.com')) {
// Won't redirect url
print('Trying to open google');
Navigator.pop(context);
return NavigationDecision.prevent;
} else if (action.url.contains('youtube.com')) {
// Allow opening url
print('Trying to open Youtube');
return NavigationDecision.navigate;
} else {
return NavigationDecision.navigate;
}
},
),
就这样!
https://stackoverflow.com/questions/63205537
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号