Angular 5应用实现非Chrome浏览器自动跳转至Chrome打开指定链接

嘿，我来帮你搞定这个需求！首先得明确一个核心限制：浏览器的安全策略不允许JavaScript直接自动启动外部应用（比如Chrome），必须经过用户主动交互（比如点击按钮）才能触发。所以我们的方案是先弹出模态框提示用户，再让用户点击按钮尝试用Chrome打开目标链接。

第一步：更精准的Chrome浏览器检测 #

你现有的检测逻辑可能会误判新版Edge等浏览器（因为它们也包含window.chrome），可以用下面这个更准确的方法：

isChromeBrowser(): boolean {
  const isChromium = window.chrome;
  const winNav = window.navigator;
  const vendorName = winNav.vendor;
  const isOpera = typeof window.opr !== "undefined";
  const isEdge = winNav.userAgent.indexOf("Edg") > -1;

  return isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && !isOpera && !isEdge;
}

第二步：实现模态框与Chrome跳转逻辑 #

假设你用Angular Material的MatDialog来做模态框（如果没安装，记得先装对应版本的@angular/material，Angular 5要配5.x.x版本），下面是完整的组件示例：

1. 主组件代码（比如SalesComponent.ts） #

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-sales',
  templateUrl: './sales.component.html',
  styleUrls: ['./sales.component.css']
})
export class SalesComponent implements OnInit {
  targetUrl = window.location.href; // 这里就是当前的www.sample.com/sales

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {
    if (!this.isChromeBrowser()) {
      this.openBrowserPromptDialog();
    }
  }

  isChromeBrowser(): boolean {
    const isChromium = window.chrome;
    const winNav = window.navigator;
    const vendorName = winNav.vendor;
    const isOpera = typeof window.opr !== "undefined";
    const isEdge = winNav.userAgent.indexOf("Edg") > -1;

    return isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && !isOpera && !isEdge;
  }

  openBrowserPromptDialog(): void {
    const dialogRef = this.dialog.open(ChromePromptDialogComponent, {
      width: '400px',
      data: { url: this.targetUrl }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === 'openInChrome') {
        this.attemptOpenInChrome();
      }
    });
  }

  attemptOpenInChrome(): void {
    // 不同系统的Chrome协议有差异，做适配处理
    let chromeUrl = '';
    const userAgent = window.navigator.userAgent;

    if (userAgent.indexOf('Windows') > -1) {
      // Windows系统用chrome协议打开新标签
      chromeUrl = `chrome://newtab/${this.targetUrl}`;
    } else if (userAgent.indexOf('Mac') > -1) {
      // Mac系统用googlechrome协议
      chromeUrl = `googlechrome://${this.targetUrl.replace('https://', '').replace('http://', '')}`;
    } else if (userAgent.indexOf('Linux') > -1) {
      // Linux系统依赖系统已配置Chrome协议关联
      chromeUrl = `chrome://newtab/${this.targetUrl}`;
    }

    // 尝试打开，失败则提示用户手动操作
    const chromeWindow = window.open(chromeUrl);
    setTimeout(() => {
      if (!chromeWindow || chromeWindow.closed || typeof chromeWindow.closed === 'undefined') {
        alert('无法自动打开Chrome，请手动打开Chrome并访问链接：' + this.targetUrl);
      }
    }, 1000);
  }
}

2. 模态框组件代码（ChromePromptDialogComponent.ts） #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  template: `
    <h2 mat-dialog-title>建议使用Chrome浏览器</h2>
    <mat-dialog-content>
      <p>为获得最佳体验，请使用Chrome浏览器打开此页面。</p>
      <p>链接：{{data.url}}</p>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">取消</button>
      <button mat-raised-button color="primary" (click)="onOpenInChrome()">在Chrome中打开</button>
    </mat-dialog-actions>
  `
})
export class ChromePromptDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ChromePromptDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { url: string }
  ) {}

  onCancel(): void {
    this.dialogRef.close();
  }

  onOpenInChrome(): void {
    this.dialogRef.close('openInChrome');
  }
}

关键注意点 #

• 安全限制：必须通过用户点击按钮触发跳转，否则浏览器会直接阻止自动打开外部应用的行为，这是浏览器的安全机制，没法绕过。
• 协议兼容性：不同系统的Chrome协议略有差异，上面的代码做了基础适配，但如果用户没装Chrome或者系统没配置协议关联，还是会失败，所以一定要加失败后的 fallback 提示。
• Angular版本适配：因为你用的是Angular 5，要确保@angular/material的版本和Angular版本匹配，避免出现依赖错误。

内容的提问来源于stack exchange，提问作者srihari