如何使用angularjs检测浏览器？

Question

我是新的angularjs。我怎么能检测用户代理在angularjs。有可能在控制器中使用它吗？尝试了下面这样的东西，但没有运气！

  var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);

我需要专门检测IE9！

Answer 1

您应该使用条件注释

<!--[if IE 9]>
<script type="text/javascript">
    window.isIE9 = true;
</script>
<![endif]-->

然后，您可以在控制器中检查$window.isIE9。

Answer 2

Angular library使用document.documentMode识别IE。它保存IE的主要版本号，如果用户代理不是IE，则保存NaN/undefined。

/**
* documentMode is an IE-only property
* http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
*/
var msie = document.documentMode;

https://github.com/angular/angular.js/blob/v1.5.0/src/Angular.js#L167-L171

$document示例（window.document的角度包装器）

// var msie = document.documentMode;
var msie = $document[0].documentMode;
// if is IE (documentMode contains IE version)
if (msie) {
  // IE logic here

  if (msie === 9) {
    // IE 9 logic here

  }
}

Answer 3

就像Eliran Malka问的，为什么你需要检查IE 9？

检测浏览器品牌和版本通常是一种难闻的气味。这通常意味着，如果您需要JavaScript来检测特定版本的浏览器，那么代码会有更大的问题。

有些情况下，某个功能无法正常工作，比如IE8或IE9不支持WebSocket。这应该通过检查WebSocket支持来解决，如果没有本机支持，则应用一个多边形填充。

这应该通过像Modernizer这样的库来完成。

也就是说，您可以轻松创建返回浏览器的服务。在某些有效情况下，浏览器中存在功能，但实现已过时或已损坏。现代化不适合这些情况。

app.service('browser', ['$window', function($window) {

     return function() {

         var userAgent = $window.navigator.userAgent;

        var browsers = {chrome: /chrome/i, safari: /safari/i, firefox: /firefox/i, ie: /internet explorer/i};

        for(var key in browsers) {
            if (browsers[key].test(userAgent)) {
                return key;
            }
       };

       return 'unknown';
    }

}]);

固定错别字经纪

注意：这只是一个如何在angular中创建服务的示例，该服务将嗅探userAgent字符串。这只是一个代码示例，不希望在生产环境中工作并报告所有情况下的所有浏览器。

更新

最好使用第三方库，如https://github.com/ded/bowser或https://github.com/darcyclarke/Detect.js.这些库分别将一个对象放在名为Bowser或检测的窗口上。

然后，您可以将其暴露到角度IoC容器中，如下所示：

angular.module('yourModule').value('bowser', bowser);

或

detectFactory.$inject = ['$window'];
function detectFactory($window) {
    return detect.parse($window.navigator.userAgent);
} 
angular.module('yourModule').factory('detect', detectFactory);

然后，您将以通常的方式注入其中一个，并使用lib提供的API。如果您选择使用另一个库，而不是使用构造函数方法，您将创建一个实例化它的工厂：

function someLibFactory() {
    return new SomeLib();
}
angular.module('yourModule').factory('someLib', someLibFactory);

然后，您将以正常方式将其注入到控制器和服务中。

如果要注入的库与您的需求不完全匹配，您可能希望使用适配器模式，在该模式中，您可以使用所需的确切方法创建类/构造函数。

在这个例子中，我们只需要测试IE 9，我们将使用上面的Bowser库。

BrowserAdapter.$inject = ['bowser']; // bring in lib
function BrowserAdapter(bowser) {
    this.bowser = bowser;
}

BrowserAdapter.prototype.isIe9 = function() {
    return this.bowser.msie && this.browser.version == 9;
}

angular.module('yourModule').service('browserAdapter', BrowserAdapter);

现在，在控制器或服务中，您可以插入browserAdapter，只要执行if（browserAdapter.isIe9）{//do something}

如果以后您想使用检测而不是Bowser，代码中的更改将被隔离到BrowserAdapter。

更新

事实上，这些价值观从未改变。如果你在IE9中加载页面，它将永远不会变成Chrome44。因此，不要将BrowserAdapter注册为服务，只需将结果放入值或常量。

angular.module('app').value('isIe9', broswerAdapter.isIe9);