如何在AngularJS发送HTTP请求onbeforeunload？ [英] How to send an HTTP request onbeforeunload in AngularJS?

问题描述

我有了正在使用ngRoute加载两个视图一个简单的角度应用程序。我需要做一些清理在服务器上，当用户导航视图和当用户离开页面之间（刷新窗口，关闭标签，或关闭浏览器）。

I have a simple angular app that has two views that are loaded using ngRoute. I need to do some clean up on the server when the user navigates between views and when the user leaves the page (refreshes window, closes tab, or closes browser).

我的第一站是在这里：<一href=\"http://stackoverflow.com/questions/14809686/showing-alert-in-angularjs-when-user-leaves-a-page\">Showing在发出警报时angularjs用户离开页面。它解决了用户视图之间导航尚属首例。我已经处理了清理这样的：

My first stop was here: Showing alert in angularjs when user leaves a page. It solved the first case where the user navigates between views. I've handled the clean up like this:

$scope.$on('$locationChangeStart', function (event) {
    var answer = confirm("Are you sure you want to leave this page?")
    if (answer) {
        api.unlock($scope.id); //api is a service that I wrote. It uses angular $http service to handle communications and works in all other cases.
    } else {
        event.preventDefault();
    }
});

不过，我一直没能处理用户离开网页的情况。按照上面的答案，这个谷歌网上论坛帖子​​： https://groups.google。 ！COM /论坛/＃话题/角/ -PfujIEdeCY 我尝试这样做：

window.onbeforeunload = function (event) {
    api.unlock($scope.id); //I don't necessarily need a confirmation dialogue, although that would be helpful. 
};

但它没有工作。然后，我在这里读到：如何执行AJAX功能onbeforeunload 的是，请求必须是同步的，并在这里：如何的$ HTTP与AngularJS <同步调用/一>的角度不支持此（虽然这其中可能已过时）。

But it did not work. Then I've read here: How to execute ajax function onbeforeunload? that the request needs to be synchronous and here: How to $http Synchronous call with AngularJS that Angular does not support this (although this one might be outdated).

我也试着调用$ HTTP直接（不包括服务），但也不能工作。在这一点上我卡住了。任何建议/引线将是非常美联社preciated。

I've also tried calling $http directly (without the service) but that did not work either. At this point I'm stuck. Any suggestions / leads would be really appreciated.

在此先感谢！

推荐答案

的问题是，角总是以$ HTTP服务异步调用（你不能改变这种行为）。由于页的$ http服务之前就存在有机会以发射你没有得到所希望的结果的请求。

The problem is that angular always make ASYNCHRONOUS calls with the $http service (and you can’t change that behavior). Since the page exists before the $http service have a chance to emit the requests you are not getting the desired result.

如果你想有一个workarround不使用任何第三方库尝试以下code：

If you want a workarround without using any third party libraries try the following code:

var onBeforeUnload = function () {

    var data = angular.toJson($scope.id...);//make sure you $scope is legal here...
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "apiURL/unlock", false);//the false is for making the call synchronous
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.setRequestHeader("Authorization", token);
    xmlhttp.send(data);
}

这将阻止用户界面，直到请求完成，所以尽量使服务器快或者用户会注意到。

It will block UI until the request is completed, so try to make the server fast or the user will notice.

这篇关于如何在AngularJS发送HTTP请求onbeforeunload？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！