如何使用angularjs检测浏览器? [英] How to detect browser using angularjs?
问题描述
我是angularjs的新手.如何在angularjs中检测到userAgent.可以在控制器中使用它吗?尝试了类似下面的内容，但是没有运气！
var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);
我需要专门检测IE9！
像Eliran Malka一样，为什么需要检查IE 9?
检测浏览器的品牌和版本通常是难闻的气味.通常，这意味着如果您需要JavaScript来检测特定版本的浏览器，则代码会有更大的问题.
在某些情况下，某些功能无法正常工作，例如IE 8或9不支持WebSockets.应通过检查WebSocket支持并在不提供本机支持的情况下应用polyfill来解决此问题./p>
这应该使用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或detect的对象上放置一个对象.
然后您可以像这样将其暴露给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 }
如果以后您想使用detect而不是bowser，则代码中的更改将被隔离到BrowserAdapter中.
更新
实际上，这些值永远不会改变.如果您在IE 9中加载该页面，它将永远不会成为Chrome44.因此，不要将BrowserAdapter注册为服务，只需将结果放在value或constant中即可.
angular.module('app').value('isIe9', broswerAdapter.isIe9);
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]);
I need to detect IE9 specifically!
Like Eliran Malka asked, why do you need to check for IE 9?
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.
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.
This should be done with a library like 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';
}
}]);
Fixed typo broswers
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.
UPDATE
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.
You can then expose this to the Angular IoC Container like this:
angular.module('yourModule').value('bowser', bowser);
Or
detectFactory.$inject = ['$window'];
function detectFactory($window) {
return detect.parse($window.navigator.userAgent);
}
angular.module('yourModule').factory('detect', detectFactory);
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.
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);
Now in a controller or service you can inject the browserAdapter and just do if (browserAdapter.isIe9) { // do something }
If later you wanted to use detect instead of bowser, the changes in your code would be isolated to the BrowserAdapter.
UPDATE
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屋！
