我正在开发Flutter web应用程序,使用go_router进行页面导航。
期望: 从初始路由开始,当用户尝试使用浏览器的后退按钮或重新加载页面时,应显示一个警告框,询问:“您确定要退出吗?”一类的消息,用户交互页面允许退出或停留在同一页。
尝试的方法:
1. WillPopScope:
我已经在HomeRoute Widget中添加了WillPopScope小部件来检测popCallBack。但是因为我可能使用go_router进行导航,所以无法在按下返回按钮时触发它。
通过执行以下语句,我无法在控制台上打印出后退事件的日志。
return WillPopScope(
onWillPop: () async {
print("on Will Pop is Called");
return false;
},
child: PaintScaffold(...)
);
MaterialApp.router的BackButtonDispatcher仅适用于Android,而不适用于Web。因此它将不起作用。 参考资料。
2. onBeforeUnload监听器
我尝试在index.html文件中添加脚本来检测onBeforeUnload事件。但是它的行为是意外的。它在chrome浏览器中表现良好,但在safari中,在按下返回按钮时不会显示警告框。但重新加载页面可以正常工作。
在iOS Safari浏览器上,无论何时页面卸载,onBeforeUnload都不会被触发。
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
window.onunload = window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
</script>
当用户尝试退出页面时,是否有其他方法来解决此问题,使其显示一个警示框以请求确认?
谢谢。