如何使用angularjs检测浏览器？

Question

我是angularjs的新手。如何在angularjs中检测到userAgent。可以在控制器中使用它吗？尝试了以下类似的方法，但是没有运气！

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

我需要专门检测IE9！

Answer 1

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

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

在某些情况下，某些功能无法正常工作，例如IE
8或9不支持WebSockets。应通过检查WebSocket支持并在不提供本机支持的情况下应用polyfill来解决。

这应该通过Modernizr之类的库来完成。

话虽如此，您可以轻松创建将返回浏览器的服务。在有效的情况下，浏览器中存在某个功能，但是实现已过时或损坏。Modernizr不适合这些情况。

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';
    }

}]);

固定错别字

注意： 这仅是如何创建有角度的服务以嗅探userAgent字符串的示例。这只是一个代码示例，在生产中并不能在所有情况下报告所有浏览器。

更新

最好使用第三方库，例如https://github.com/ded/bowser或https://github.com/darcyclarke/Detect.js。这些库分别将对象放置在window命名的Bowser上或进行检测。

然后，您可以将其公开Angular IoC Container如下：

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);

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

如果要注入的库与您的要求不完全匹配，则可能需要在使用Adapter Pattern需要确切方法的类/构造函数的创建位置使用。

在此示例中，我们只需要测试IE 9，我们将使用bowser上面的lib。

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中。

更新

实际上，这些价值永远不会改变。如果您在IE
9中加载该页面，它将永远不会成为Chrome44。因此，不要将BrowserAdapter注册为服务，只需将结果放在value或中即可constant。

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