無法使用 Angular 服務處理 onbeforeunload 事件

Question

在我的一項服務中，我的onbeforeUnload事件有以下回調。 在我的app.run塊中，我有：

window.onbeforeunload = Services.beforeWindowClose;

這個方法在一個服務中：

this.beforeWindowClose = function (event) {
            var currentState = $state.current.name;
            if (currentState !== constant.LOGOUT) {
                $rootScope.$broadcast("close");
                if (Utilities.isSavePending)
                    event.returnValue = constant.MSG;
            }
        }

在我的控制器中，我有：

$scope.$on("close", function () {
            Utilities.isSavePending = vm.save; //sets it to true
        })

現在考慮到事件在角度上是同步的，這段代碼應該在窗口關閉時給我一個彈出窗口。 但是，這直接關閉了我的窗口。

我的意圖是每當用戶關閉窗口時，我都會引發一個事件並查看我的控制器中是否有任何未保存的數據。 如果有未保存的數據，瀏覽器不應該關閉並彈出，如果沒有未保存的數據，瀏覽器應該關閉。

我做錯或理解錯了嗎？

Answer 1

在您的模塊run函數中，您必須beforeunload這種方式聲明beforeunload事件：

.run(['$window', 'Utilities', function($window, Utilities) {  
  $window.addEventListener('beforeunload', function(e)         
     // Place code here
  };       
});

不是這樣：

.run(['$window', 'Utilities', function($window, Utilities) {  
    window.onbeforeunload = function() {         
     // Place code here
    };
}]);

這是在 Angular 中使用onbeforeunload事件的片段。

注意：根據您的瀏覽器，單擊“保存項目”按鈕並嘗試關閉此窗口后，代碼段將不起作用。 然后，您需要將代碼粘貼到您自己的項目中。

附加信息

最近的 HTML 規范現在阻止自定義彈出消息，而是顯示通用消息。

因此，始終可以阻止導航，但不再可能指定自定義消息

這始終適用於 IE11，但它應該不會持續很長時間（直到下一次更新）。

關於此的 HTML 規范： https : //html.spec.whatwg.org/multipage/browsers.html#unloading-documents

關於這個的 Chrome/Safari 文檔： https : //www.chromestatus.com/feature/5349061406228480

 angular.module('app', []); angular .module('app') .controller('ExampleController', ['$scope', 'Utilities', 'ItemService', function($scope, Utilities, ItemService) { // Expose Utilities to make pending state available in template $scope.Utilities = Utilities; // Use item service to save our item $scope.save = function() { ItemService.saveItem(); } $scope.fireCloseEvent = function() { $scope.$emit('close'); } $scope.$on('close', function(event) { Utilities.toggleSavePending(); }); }]) .factory('ItemService', ['Utilities', function(Utilities) { return { saveItem: function() { // ... // Toggle global save pending state Utilities.toggleSavePending(); } } }]) .factory('Utilities', function() { var savePending = false; return { toggleSavePending: function() { savePending = !savePending; }, isSavePending: function() { return savePending; } } }) .run(['$window', 'Utilities', function($window, Utilities) { $window.addEventListener('beforeunload', function(e) { // If save pending state is truthy, prevent browser window from closing if (Utilities.isSavePending()) { var message = 'Warning! Save pending...'; e = e || window.event; if (e) { e.returnValue = message; } return message; } }); }]);

 <!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-controller="ExampleController"> <button ng-click="save()" ng-disabled="Utilities.isSavePending()">Save item</button> <button ng-click="fireCloseEvent()">Fire Close Event</button> <div ng-if="Utilities.isSavePending()">A message should be displayed when you close the window</div> </body> </html>

無法使用 Angular 服務處理 onbeforeunload 事件

問題描述

1 個解決方案

解決方案1
6 已采納 2017-05-23 11:16:50

無法使用 Angular 服務處理 onbeforeunload 事件

問題描述

1 個解決方案

解決方案1 6 已采納 2017-05-23 11:16:50

解決方案1
6 已采納 2017-05-23 11:16:50