如何使用angularJs检查用户是否有互联网连接

发布时间：2020-12-17 09:17:02 所属栏目：安全来源：网络整理

导读：当用户尝试在没有Internet连接的情况下登录时,我只需要检查他/她是否已连接到Internet. 我尝试了以下代码： if (status == '404') { $scope.error="No internet connection"; return false;} 但即使我的Web服务无法连接,此状态404也会出现.我需要区分两者,如

当用户尝试在没有Internet连接的情况下登录时,我只需要检查他/她是否已连接到Internet.

我尝试了以下代码：

if (status == '404') {
    $scope.error="No internet connection";
    return false;
}

但即使我的Web服务无法连接,此状态404也会出现.我需要区分两者,如果是用户的互联网连接问题或Web服务连接问题.

使用navigator.onLine

您可以使用navigator.onLine并将其包装在辅助变量上,如下所示(Credits to this answer)

myApp.run(function($window,$rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline",function () {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      },false);
      $window.addEventListener("online",function () {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      },false);
});

然后在控制器中观看它：

$scope.$watch('online',function(newStatus) { ... });

但这只是一个肮脏的检查,以了解PC是否实际连接到网络,而不是意味着互联网正在工作.

使用假的AJAX请求

您可以模拟向浏览器发出虚假请求的服务(警告：下面未经测试的代码)

myApp.service('Internet',function($http){
  this.IsOk = function () {
    return $http({ method: 'HEAD',url: '/' + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000) })
    .then(function(response) {
      var status = response.status;
      return status >= 200 && status < 300 || status === 304;
    });
  }
});

然后在这种情况下使用一些东西：

myApp.controller('TestController',function(Internet){

  Internet.IsOn().then(function(isok){
    if(isok) {...} else {...}
  });

});

this link请求模拟代码.

另请注意,使用localhost无法正常工作,因为即使断开连接到Internet,服务器也能正常工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!