angularjs를 사용하여 브라우저를 검출하는 방법

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 지원 여부를 확인하고 네이티브 지원이 없는 경우 폴리필을 적용하여 해결합니다.

이것은 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활을 쏘다

그런 다음 이 정보를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를 사용합니다.컨스트럭터 메서드를 사용하는 다른 lib를 사용하는 경우 이를 인스턴스화하는 팩토리를 만듭니다.

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

그런 다음 컨트롤러와 서비스에 통상적인 방법으로 이 정보를 주입합니다.

가 요건에하지 않는 는, 「」를할 수 .Adapter Pattern필요한 메서드를 사용하여 클래스/클래스를 만듭니다.

9의 되고 9의 테스트에서는 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 대신 detect를 사용할 경우 코드 변경은 BrowserAdapter로 한정됩니다.

갱신하다

실제로 이러한 가치는 결코 변하지 않습니다.IE 9는 크롬 44입니다.를 "BrowserAdapter"에 .value ★★★★★★★★★★★★★★★★★」constant.

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

Angular 라이브러리는 document.documentMode를 사용하여 IE를 식별합니다.IE의 메이저버전 번호 또는 사용자 에이전트가 IE가 아닌 경우 NaN/정의되지 않음.

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

  }
}

조건부 코멘트를 사용해야 합니다.

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

그러면 $window.is를 확인할 수 있습니다.컨트롤러의 IE9.

각도 내에 있어야 한다고 지정하는 이유를 잘 모르겠습니다.JavaScript를 통해 쉽게 실행할 수 있습니다.사물을 보세요.

「 」를 조사하기만 하면 됩니다.navigator당신이 특별히 원하는 건.userAgent ★★★★★★★★★★★★★★★★★」.appVersion

IE9이 설치되어 있지 않지만 다음 코드를 사용해 보십시오.

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

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

따라서 컨텐츠가 포함된 파일을 생성하여 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);

그 후, 기능에서는, 다음과 같이 사용할 수 있습니다.

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

원하는 각도에 가까운 위의 기술을 수정하여 서비스 :-)로 만들었습니다.angularjs 앱에 문제가 있어서 ie9을 넣었습니다만, 혹시 제가 하고 있는 일이 있을지도 모르니 부담없이 꺼내 주세요.

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

});

브라우저 등의 엔티티를 쉽게 검출할 수 있는 라이브러리 ng-device-detector가 있습니다.

다음은 이 라이브러리의 사용 방법을 설명하는 튜토리얼입니다.Angular에서 OS, 브라우저 및 디바이스 검출JS

ng Device Detector(DeviceDetector)

html에 re-tree.js 및 ng-device-detector.js 스크립트를 추가해야 합니다.

모듈에 의존관계로 "ng.deviceDetector"를 삽입합니다.

그런 다음 라이브러리에서 제공하는 "디바이스 디텍터" 서비스를 데이터가 필요한 컨트롤러 또는 공장에 삽입하십시오.

"deviceDetector"에는 브라우저, OS 및 디바이스에 관한 모든 데이터가 포함됩니다.

'우리'를 쓰지 거죠?document.documentModeIE에서만 사용 가능:

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.
}

브라우저의 스니핑은 일반적으로 피해야 합니다.기능 검출이 훨씬 좋지만 경우에 따라서는 해야 할 수도 있습니다.예를 들어, Windows 8 태블릿은 브라우저 창과 소프트 키보드가 겹쳐져 있습니다.어처구니없다는 것은 알지만, 때로는 현실을 직시해야 할 때도 있습니다.

따라서 일반 JavaScript와 마찬가지로 'navigator.userAgent'를 측정해야 합니다(Angular를 JavaScript와 구별되는 것으로 취급하지 말고 가능하면 일반 JavaScript를 사용하십시오).

그러나 테스트에는 전역 개체보다는 주입 개체를 사용해야 합니다.'$location'에는 userAgent가 포함되어 있지 않으므로 간단한 방법은 '$window.location.userAgent'를 사용하는 것입니다.시뮬레이션하지 않을 userAgent를 사용하여 $window stub을 삽입하는 테스트를 작성할 수 있습니다.

몇 년 동안 사용하지 않았지만 Modernizr은 기능을 확인하는 데 좋은 코드 소스입니다.https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059

검출 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
}

언급URL : https://stackoverflow.com/questions/22947535/how-to-detect-browser-using-angularjs