Angular 6浏览器检测?

6
我有一个Angular6应用程序,我们仅支持Chrome浏览器,但如果用户尝试在IE中导航到该应用程序,则要求显示页面/消息,指出不支持IE并建议使用Chrome浏览器打开或下载Chrome。
我需要使用Polyfill让该应用程序能够在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;

有什么想法?谢谢!

尝试使用这个。https://github.com/DamonOehlman/detect-browser 或 https://github.com/lancedikson/bowser - naveen
3个回答

1
在 app.component.ts 的 ngOninit 中,使用 if else 块。在下面的示例中,用户在关闭警告后将返回上一个(非 Angular)页面,因此 Angular 的其余部分不会加载。
if (isIE) {
    alert('Message for users about not using IE');
    window.history.go(-1);
} else {
    // the rest of ngOnInit
}

1

window.navigator.userAgent保存用户代理信息,以string的形式呈现。要检测浏览器,需要解析userAgent

要检测Microsoft Internet Explorer和Microsoft Edge,我们使用以下条件。

window.navigator.userAgent.toLowerCase().indexOf('trident') > -1 || 
window.navigator.userAgent.toLowerCase().indexOf('edge') > -1


但是,重新发明轮子并不总是更好的选择。相反,可以使用像bowser这样的软件包npm install bowser

现在导入并获取详细信息

import * as Bowser from "bowser";
// ......
userAgent = Bowser.parse(window.navigator.userAgent);
browser = Bowser.getParser(window.navigator.userAgent);

Example: https://stackblitz.com/edit/angular-bowser P.S: 请注意,navigator.userAgent.toLowerCase().indexOf('edge') > -1 在 Microsoft Edge Beta(当前版本为79.0.309.43)上失败,因为userAgent为:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43


0

你也可以在 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接