web-dev-qa-db-ja.com

Angularでブラウザを検出する方法は？

ブラウザがIEであるか、Angular（TypeScript）でEdgeであるかを検出する必要があります。出来ますか？もしそうなら、どのように？

angulartypescriptbrowser-detection
27
Liutas

以前にこれを使用しましたが、うまくいきました。

const isIEOrEdge = /msie\s|trident\/|Edge\//i.test(window.navigator.userAgent)
48
argoo

次のコードを使用してください：

// Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    //var isChrome = !!window.chrome && !!window.chrome.webstore;
    // If isChrome is undefined, then use:
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    var output = 'Detecting browsers by ducktyping:<hr>';
    output += 'isFirefox: ' + isFirefox + '<br>';
    output += 'isChrome: ' + isChrome + '<br>';
    output += 'isSafari: ' + isSafari + '<br>';
    output += 'isOpera: ' + isOpera + '<br>';
    output += 'isIE: ' + isIE + '<br>';
    output += 'isEdge: ' + isEdge + '<br>';
    output += 'isBlink: ' + isBlink + '<br>';
    document.body.innerHTML = output;
18
I. Ahmed

angularユーザーの場合、 このモジュールnpm install ngx-device-detector --saveを使用できます

上記の答えは私にはうまくいきませんでした

3
penduDev

ブラウザIE（5,6,7,8）を検出のときにメッセージを表示する場合は、コード行を使用できます。

まず、コンパイラが最初にこのファイルを読み取るため、このコードはindex.htmlファイルでのみ使用されます。

<body>
<p id="NRL" style="background-color: aquamarine;text-align: center"></p>
<app-root></app-root>

<script>

  let isIE1 =/^.*MSIE [5-9]/i.test(window.navigator.userAgent);
    if(isIE1){
      alert('you are using older version of IE .........')

      document.getElementById("NRL").innerHTML = "you are using older version of IE .........";
    }
  </script>
</body>
1
nagender pratap chauhan

これは私のために働いた：

  public getBrowserName() {
    const agent = window.navigator.userAgent.toLowerCase()
    switch (true) {
      case agent.indexOf('Edge') > -1:
        return 'Edge';
      case agent.indexOf('opr') > -1 && !!(<any>window).opr:
        return 'opera';
      case agent.indexOf('chrome') > -1 && !!(<any>window).chrome:
        return 'chrome';
      case agent.indexOf('trident') > -1:
        return 'ie';
      case agent.indexOf('firefox') > -1:
        return 'firefox';
      case agent.indexOf('safari') > -1:
        return 'safari';
      default:
        return 'other';
    }

}

getBrowserName()を呼び出した後、戻り値を==='Edge'と比較して、Edgeブラウザーで操作しているかどうかを確認できます。

0
troYman

IEの検出には、useragentでregexを使用できます。

 private isIE() {
    const match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
    let isIE = false;

    if (match !== -1) {
        isIE = true;
    }

    return isIE;
}

ただし、ブラウザ検出ではなく機能検出を使用することを常にお勧めします。そのためにmodernizrライブラリを使用できます https://modernizr.com

0
Amit Gaikwad