web-dev-qa-db-ja.com

Angular 6ブラウザ検出？

Chromeでのみサポートしているangular6アプリがありますが、ユーザーがIEサポートされていないと言って、アプリに移動しようとしたページ/メッセージを表示したいのですが、このリンクをchromeに貼り付けるか、chromeをダウンロードしてください。

このメッセージを表示するためにアプリをIEで実行できるようにするためにポリフィルが必要ですか、それともこのポップアップのみを表示するために使用できる何らかのブラウザー検出がありますか？

私が持っているTSでブラウザ検出を実行できることは知っていますが、これは、アプリが読み込まれてページを表示するためにIE polyfillが必要であることを意味します。

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

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

考え？ありがとう！

angulartypescriptbrowserangular6browser-detection
4
J Hogan

App.component.tsのngOninitで、ifelseブロックを使用します。以下の例では、アラートを閉じた後、ユーザーは前の（Angular以外の）ページに戻るため、残りのangularは読み込まれません。

if (isIE) {
    alert('Message for users about not using IE');
    window.history.go(-1);
} else {
    // the rest of ngOnInit
}
1
Ken Whipday

これをindex.htmlに追加することもできます：

  <script>
    var browserName = getBrowserName();
    if (browserName == 'ie') {
       alert("IE is not supported")
    }

    function getBrowserName() {
      const agent = window.navigator.userAgent.toLowerCase()
      switch (true) {
        case agent.indexOf('Edge') > -1:
          return 'Edge';
        case agent.indexOf('opr') > -1 && !!(window).opr:
          return 'opera';
        case agent.indexOf('chrome') > -1 && !!(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';
      }
    }
  </script>
0
Adrita Sharma