Question

我需要检测浏览器是IE还是Edge with Angular（TypeScript）。可能吗？如果是这样，怎么样？

Answer 1

我之前使用过它，效果很好。

let isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)

Answer 2

请使用以下代码：

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

Answer 3

对于仍在查找此线程的人：

如果您使用的是Angular 10或更高版本，建议您使用PlatformModule，它已添加到版本10的Angular Material CDK中。

https://material.angular.io/cdk/platform/api

Answer 4

浏览器 userAgent 往往会随着时间的推移而有所不同和演变。我会考虑使用维护良好的库来确保未来的支持，而不是手动解析它。最受欢迎的选项是：

1.角材料

很多人不知道，但在 V6.4.7 Material 中引入了 Platform 检测模块：

<块引用>

平台：通过比较 userAgent 字符串和检查浏览器特定的全局属性来检测当前平台的服务。

只需导入 Platform 服务并直接检查 EDGE（或任何其他浏览器/操作系统）：

import { Platform } from '@angular/cdk/platform';

@Injectable()
export class AppService {
    
    isEdge: boolean;

    constructor(private platform: Platform) {
        this.isEdge = this.platform.EDGE; // or IOS, SAFARI, ANDROID, etc.
    }
}

2. UAParser.js

This excellent library 将从占用空间相对较小的 User-Agent 数据中分析客户端浏览器、引擎、操作系统、CPU 和设备类型/模型。它得到高度维护且非常受欢迎（每周下载 730 万次）。使用很简单：

import { UAParser } from 'ua-parser-js'; 

const parser = new UAParser();
const result = parser.getResult();

const isEdge = result.browser == 'Edge';

Answer 5

对于有角度的用户，您可以使用this module npm install ngx-device-detector --save

以上回答对我没有帮助

Answer 6

如果要在浏览器检测到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>

Answer 7

要检测浏览器是否基于Chromium，请使用以下代码：

const isChromiumBased =
  !!window["chrome"] &&
  (!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]);

Answer 8

您可以将正则表达式与useragent一起用于检测IE。

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

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

    return isIE;
}

但是，始终建议使用功能检测而不是浏览器检测。您可以为https://modernizr.com

使用modernizr库

Answer 9

这对我有用：

  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'进行比较，以查看是否在边缘浏览器中进行操作。

Answer 10

如果对使用外部模块感到满意，则可以使用ngx-device-detector。

$ npm install ngx-device-detector --save

用法：

  import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

在您要使用设备服务的组件中

 import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
      this.epicFunction();
    }
    ...
    epicFunction() {
      console.log('hello `Home` component');
      this.deviceInfo = this.deviceService.getDeviceInfo();
      const isMobile = this.deviceService.isMobile();
      const isTablet = this.deviceService.isTablet();
      const isDesktopDevice = this.deviceService.isDesktop();
      console.log(this.deviceInfo);
      console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(isTablet);  // returns if the device us a tablet (iPad etc)
      console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
    }
    ...
  }

设备服务 拥有以下属性

浏览器
操作系统
设备
userAgent
os_version

辅助方法

isMobile（）：返回设备是否为移动设备（Android / iPhone / Windows Phone等）

isTablet（）：返回设备是否使用平板电脑（iPad等）

isDesktop（）：返回应用程序是否在桌面浏览器上运行

以下是“文档”链接：https://koderlabs.github.io/ngx-device-detector/index.html

Answer 11

您可以使用以下代码获取浏览器名称：

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

if (match !== -1) {
    isIE = true;
}
console.log(isIE,'isIE');

如何用Angular检测浏览器？

11 个答案:

1.角材料

2. UAParser.js