我有以下代码:
$window.onbeforeunload = function (event) {
event.preventDefault();
// some asynchronous code
};
我希望onbeforeunload
事件等待直到执行异步代码。不确定是否可以在所有支持AngularJS的浏览器中实现。
我有以下代码:
$window.onbeforeunload = function (event) {
event.preventDefault();
// some asynchronous code
};
我希望onbeforeunload
事件等待直到执行异步代码。不确定是否可以在所有支持AngularJS的浏览器中实现。
无论您使用的是AngularJS还是任何其他框架,现代浏览器都不再支持将窗口卸载延迟到异步操作完成之前,因为这会带来糟糕的用户体验。
但是,假设您要执行的异步操作是发出API请求,那么现代的解决方案是改用navigator.sendBeacon()
方法。即使在卸载窗口之后,也可以保证浏览器以非阻塞方式发送它。对于每个人来说,这都是一个更好的解决方案。
请注意,信标请求必须作为POST请求发送,因此您的API需要支持您希望在卸载处理程序中使用的所有端点的此方法。
,可以创建一个查看微调器标志的处理程序:
var spinnerFlag = false;
$window.addEventListener('beforeunload',unloadHandler);
$scope.$on("$destroy",function() {
$window.removeEventListener('beforeunload',unloadHandler);
});
function unLoadHandler(e) {
if (spinnerFlag) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
};
});
然后可以设置并清除标志:
spinnerFlag = true;
var promise = promiseBasedAPI(arguments).finally(function() {spinnerFlag = false;});
这将在启动异步操作之前设置标志,并在Promise成功或拒绝时清除标志。
如果承诺尚未解决,将提示用户确认页面卸载。
有关更多信息,请参见