在用户操作网页时,我们有时需要监听用户关闭或者跳转网页的行为,比如像在线编辑工具,如果用户没有提交、保存就关闭页面,那一切更新的数据都会丢失,如何防止这一现象发生?本文提供了一种解决办法,但不是很友好,不得已而为之。
关于页面/浏览器关闭事件,onbeforeunload依旧可行,不过如果使用者禁止了这一事件,那就改换别的办法吧。
关于页面跳转,也就是网址发生变化,如果要监听路由变化,有两种情况:
- 用ng-route路由,就使用$locationChangeStart事件:
$scope.$on('$locationChangeStart', function( event ) {
var answer = confirm("Are you sure you want to leave this page?")
if (!answer) {
event.preventDefault();
}
});
2.用ui-route路由,就使用$stateChangeStart事件:
$scope.$on('$stateChangeStart', function(event) {
var answer = confirm("确定不保存么?");
if (!answer) {
event.preventDefault();
}
});
**补充:
A: 如何去掉上面两个函数监听呢?(比如用户保存完之后)
1.再写一个onbeforeunload事件,事件中什么都不放置,可以让用户保存之后触发此事件;
2.将$locationChangeStart或者$stateChangeStart事件放在一个全局变量中,比如vm.stopListener,之后在用户触发的事件中调用一次vm.stopListener()即可。