如何使用 Angular 检测浏览器？

Question

我需要使用 Angular (TypeScript) 检测浏览器是 IE 还是 Edge。可能吗？如果可以，怎么做？

Answer 1

请使用以下代码：

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

我以前用过这个，效果很好。

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

Answer 3

您可以使用带有用户代理的正则表达式来检测 IE。

 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

Answer 4

对于 angular 用户，您可以使用 this module npm install ngx-device-detector --save

以上答案对我不起作用

Answer 5

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

这对我有用：

  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()后，可以将return值与==='edge'进行比较，看是否在edge浏览器中操作。

Answer 7

如果您对使用外部模块感到满意，可以使用 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.
    }
    ...
  }

设备服务 拥有以下属性

浏览器
os
设备
用户代理
os_version

辅助方法

isMobile() : returns 如果设备是移动设备（android / iPhone/ windows-phone 等）

isTablet() : returns 如果设备是平板电脑（iPad 等）

isDesktop() : returns 如果应用程序运行在桌面浏览器上

这是文件 link：https://koderlabs.github.io/ngx-device-detector/index.html

Answer 8

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

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

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

Answer 9

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

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

Answer 10

对于仍在寻找此主题的人：

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

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

Answer 11

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

1。 UAParser.js

This excellent library 将从占用空间相对较小的用户代理数据中分析客户端浏览器、引擎、OS、CPU 和设备 type/model。它得到高度维护并且非常受欢迎（每周 730 万次下载 ATTOW）。用法很简单：

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

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

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

2。 Angular Material

Angular Material V6.4.7 中引入了“平台”检测模块：

Platform: service to detect the current platform by comparing the userAgent strings and checking browser-specific global properties.

关于 EDGE 检测的重要说明：由于 79 版 EDGE 使用 Blink 浏览器引擎，因此此选项仅适用于旧版 EDGE。

~~导入Platform服务并直接检查EDGE（或任何其他浏览器/OS）：~~

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

如何使用 Angular 检测浏览器？

How to detect browser with Angular?

browser-detection

typescript

angular

1。 UAParser.js

2。 Angular Material