如何使用angularjs检测浏览器? [英] How to detect browser using angularjs?

问题描述

我是 angularjs 的新手.如何在 angularjs 中检测 userAgent.可以在控制器中使用它吗?尝试过类似下面的方法，但没有成功！

I am new to angularjs. How can I detect userAgent in angularjs. Is it possible to use that in controller? Tried something like below but no luck!

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

我需要专门检测IE9！

I need to detect IE9 specifically!

推荐答案

就像 Eliran Malka 所问的那样，你为什么需要检查 IE 9?

Like Eliran Malka asked, why do you need to check for IE 9?

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

Detecting browser make and version is generally a bad smell. This generally means that you there is a bigger problem with the code if you need JavaScript to detect specific versions of browser.

确实存在某些功能不起作用的情况，例如 IE 8 或 9 不支持 WebSockets.这应该通过检查 WebSocket 支持来解决，如果没有本机支持，则应用 polyfill.

There are genuine cases where a feature won't work, like say WebSockets isn't supported in IE 8 or 9. This should be solved by checking for WebSocket support, and applying a polyfill if there is no native support.

这应该通过像 Modernizr 这样的库来完成.

This should be done with a library like Modernizr.

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

That being said, you can easily create service that would return the browser. There are valid cases where a feature exists in a browser but the implementation is outdated or broken. Modernizr is not appropriate for these cases.

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 字符串的服务.这只是一个代码示例，预计不会在生产中工作并在所有情况下报告所有浏览器.

Note: This is just an example of how to create a service in angular that will sniff the userAgent string. This is just a code example that is not expected to work in production and report all browsers in all situations.

更新

最好使用第三方库，例如 https://github.com/ded/bowser 或 https://github.com/darcyclarke/Detect.js.这些库将一个对象分别放置在名为 bowser 或 detect 的 window 上.

It is probably best to use a third party library like https://github.com/ded/bowser or https://github.com/darcyclarke/Detect.js. These libs place an object on the window named bowser or detect respectively.

然后您可以像这样将其公开给 Angular IoC Container:

You can then expose this to the Angular IoC Container like this:

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

或者

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

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

You would then inject one of these the usual way, and use the API provided by the lib. If you choose to use another lib that instead uses a constructor method, you would create a factory that instantiates it:

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

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

You would then inject this into your controllers and services the normal way.

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

If the library you are injecting does not exactly match your requirements, you may want to employ the Adapter Pattern where you create a class/constructor with the exact methods you need.

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

In this example we just need to test for IE 9, and we are going to use the bowser lib above.

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 }

Now in a controller or service you can inject the browserAdapter and just do if (browserAdapter.isIe9) { // do something }

如果以后您想使用detect 而不是bowser，您的代码中的更改将与BrowserAdapter 隔离.

If later you wanted to use detect instead of bowser, the changes in your code would be isolated to the BrowserAdapter.

更新

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

In reality these values never change. IF you load the page in IE 9 it will never become Chrome 44. So instead of registering the BrowserAdapter as a service, just put the result in a value or constant.

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

这篇关于如何使用angularjs检测浏览器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！