it-swarm.com.ru

Как определить браузер, используя angularjs?

Я новичок в angularjs. Как я могу обнаружить userAgent в angularjs. Возможно ли использовать это в контроллере? Пробовал что-то вроде ниже, но не повезло!

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

Мне нужно определить IE9 специально!

61
seUser

Как спросил Элиран Малка, зачем вам проверять IE 9?

Обнаружение марки и версии браузера обычно является неприятным запахом. Как правило, это означает, что у вас есть большая проблема с кодом, если вам нужен JavaScript для обнаружения определенных версий браузера.

Есть подлинные случаи, когда функция не будет работать, например, скажем, WebSockets не поддерживается в IE 8 или 9. Это необходимо решить, проверяя поддержку WebSocket и применяя полифил, если нет встроенного служба поддержки.

Это должно быть сделано с такой библиотекой, как 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';
    }

}]);

Исправлены опечатки

Примечание: Это всего лишь пример того, как создать службу в angular, которая будет прослушивать строку 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);

Затем вы вводите один из них обычным способом и используете API, предоставляемый библиотекой lib. Если вы решите использовать другую библиотеку, которая вместо этого использует метод конструктора, вы должны создать фабрику, которая ее создает:

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

Затем вы вставляете это в свои контроллеры и сервисы обычным способом.

Если внедряемая вами библиотека не совсем соответствует вашим требованиям, вы можете использовать Adapter Pattern, где вы создаете класс/конструктор с точными методами, которые вам нужны.

В этом примере нам просто нужно проверить на 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.

ОБНОВИТЬ

На самом деле эти ценности никогда не меняются. Если вы загрузите страницу в IE 9, она никогда не станет Chrome 44. Поэтому вместо регистрации BrowserAdapter в качестве службы просто поместите результат в value или constant.

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

Библиотека Angular использует document.documentMode для идентификации IE. Он содержит основной номер версии для IE или NaN/undefined, если агент пользователя не является IE.

/**
* 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

  }
}
22
Bohdan Lyzanets

вы должны использовать условные комментарии

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

Затем вы можете проверить наличие $ window.isIE9 в ваших контроллерах.

15
Michael

Не уверен, почему вы указываете, что это должно быть в Angular. Это легко сделать с помощью JavaScript. Посмотрите на объект navigator .

Просто откройте консоль и проверьте navigator. Кажется, что вы конкретно ищете это .userAgent или .appVersion.

У меня не установлен IE9, но вы можете попробовать следующий код

//Detect if IE 9
if(navigator.appVersion.indexOf("MSIE 9.")!=-1)
12
EnigmaRM

Вы можете легко использовать модуль "ng-device-Detector".

https://github.com/srfrnk/ng-device-detector

var app = angular.module('myapp', ["ng.deviceDetector"]);
app.controller('DeviceCtrl', ["$scope","deviceDetector",function($scope,deviceDetector) {
      console.log("browser: ", deviceDetector.browser);
      console.log("browser version: ", deviceDetector.browser_version);
      console.log("device: ", deviceDetector.device);
}]);
12
UserNeD

Таким образом, вы можете объявить больше утилит для angular, создав файл с содержимым (я следую за RGraph Library)

(function(window, angular, undefined) {'use strict';
    var agl = angular || {};
    var ua  = navigator.userAgent;

    agl.ISFF     = ua.indexOf('Firefox') != -1;
    agl.ISOPERA  = ua.indexOf('Opera') != -1;
    agl.ISCHROME = ua.indexOf('Chrome') != -1;
    agl.ISSAFARI = ua.indexOf('Safari') != -1 && !agl.ISCHROME;
    agl.ISWEBKIT = ua.indexOf('WebKit') != -1;

    agl.ISIE   = ua.indexOf('Trident') > 0 || navigator.userAgent.indexOf('MSIE') > 0;
    agl.ISIE6  = ua.indexOf('MSIE 6') > 0;
    agl.ISIE7  = ua.indexOf('MSIE 7') > 0;
    agl.ISIE8  = ua.indexOf('MSIE 8') > 0;
    agl.ISIE9  = ua.indexOf('MSIE 9') > 0;
    agl.ISIE10 = ua.indexOf('MSIE 10') > 0;
    agl.ISOLD  = agl.ISIE6 || agl.ISIE7 || agl.ISIE8; // MUST be here

    agl.ISIE11UP = ua.indexOf('MSIE') == -1 && ua.indexOf('Trident') > 0;
    agl.ISIE10UP = agl.ISIE10 || agl.ISIE11UP;
    agl.ISIE9UP  = agl.ISIE9 || agl.ISIE10UP;

})(window, window.angular);

после этого в вашей функции use можете использовать его как

function SampleController($scope){
    $scope.click = function () {
        if(angular.ISCHROME) {
        alert("is chrome");
    }
}
7
haizpt

Я изменил вышеописанный метод, который был близок к тому, что я хотел для angular, и превратил его в сервис :-). Я включил ie9, потому что у меня были некоторые проблемы в моем приложении angularjs, но я мог это сделать, поэтому не стесняйтесь их устранять.

angular.module('myModule').service('browserDetectionService', function() {

 return {
isCompatible: function () {

  var browserInfo = navigator.userAgent;
  var browserFlags =  {};

  browserFlags.ISFF = browserInfo.indexOf('Firefox') != -1;
  browserFlags.ISOPERA = browserInfo.indexOf('Opera') != -1;
  browserFlags.ISCHROME = browserInfo.indexOf('Chrome') != -1;
  browserFlags.ISSAFARI = browserInfo.indexOf('Safari') != -1 && !browserFlags.ISCHROME;
  browserFlags.ISWEBKIT = browserInfo.indexOf('WebKit') != -1;

  browserFlags.ISIE = browserInfo.indexOf('Trident') > 0 || navigator.userAgent.indexOf('MSIE') > 0;
  browserFlags.ISIE6 = browserInfo.indexOf('MSIE 6') > 0;
  browserFlags.ISIE7 = browserInfo.indexOf('MSIE 7') > 0;
  browserFlags.ISIE8 = browserInfo.indexOf('MSIE 8') > 0;
  browserFlags.ISIE9 = browserInfo.indexOf('MSIE 9') > 0;
  browserFlags.ISIE10 = browserInfo.indexOf('MSIE 10') > 0;
  browserFlags.ISOLD = browserFlags.ISIE6 || browserFlags.ISIE7 || browserFlags.ISIE8 || browserFlags.ISIE9; // MUST be here

  browserFlags.ISIE11UP = browserInfo.indexOf('MSIE') == -1 && browserInfo.indexOf('Trident') > 0;
  browserFlags.ISIE10UP = browserFlags.ISIE10 || browserFlags.ISIE11UP;
  browserFlags.ISIE9UP = browserFlags.ISIE9 || browserFlags.ISIE10UP;

  return !browserFlags.ISOLD;
  }
};

});
4
mike gold

Существует библиотека ng-device-Detector, которая позволяет легко обнаруживать такие объекты, как браузер.

Вот учебник, который объясняет, как использовать эту библиотеку. Определить ОС, браузер и устройство в AngularJS

ngDeviceDetector

Вам нужно добавить сценарии re-tree.js и ng-device-dete.js в ваш HTML

Вставьте "ng.deviceDetector" в качестве зависимости в вашем модуле.

Затем внедрите сервис "deviceDetector", предоставляемый библиотекой, в ваш контроллер или фабрику, где бы вы ни хотели получить данные.

"deviceDetector" содержит все данные, касающиеся браузера, операционной системы и устройства.

3
rahil471

Почему бы не использовать document.documentMode, доступный только под IE:

var doc = $window.document;
if (!!doc.documentMode)
{
  if (doc.documentMode === 10)
  {
    doc.documentElement.className += ' isIE isIE10';
  }
  else if (doc.documentMode === 11)
  {
    doc.documentElement.className += ' isIE isIE11';
  }
  // etc.
}
1
Alain Duchesneau

Как правило, следует избегать прослушивания браузера, обнаружение функций намного лучше, но иногда вам приходится это делать. Например, в моем случае Windows 8 Tablets перекрывает окно браузера программной клавиатурой; Смешно, я знаю, но иногда приходится иметь дело с реальностью.

Таким образом, вы должны измерить 'navigator.userAgent' как с обычным JavaScript (пожалуйста, не принимайте привычку трактовать Angular как нечто отличное от JavaScript, используйте простой JavaScript, если это возможно, это приведет к меньшему рефакторингу в будущем) ,.

Однако для тестирования вы хотите использовать внедренные объекты, а не глобальные. Так как $ location не содержит userAgent, простой трюк заключается в использовании $ window.location.userAgent. Теперь вы можете написать тесты, которые вставляют заглушку $ window любому агенту, который вы не хотите имитировать.

Я не использовал его в течение многих лет, но Modernizr хороший источник кода для проверки функций. https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059

1
Henrik Vendelbo

Обнаружение ie9 +

var userAgent, ieReg, ie;
  userAgent = $window.navigator.userAgent;
  ieReg = /msie|Trident.*rv[ :]*11\./gi;
  ie = ieReg.test(userAgent);

if (ie) {
   // js for ie9,10 and 11
}
0
Alex Golovin