Angular 7 如何实现点击链接时关闭已打开同URL浏览器标签页

首先明确浏览器原生安全策略的权限边界，避免无意义尝试：

• Web脚本没有无限制控制所有打开标签页的权限，仅两类标签页可被脚本操作关闭：
• 当前页面通过window.open方法主动打开的同源标签页
• 同源下、通过跨标签通信通道主动收到关闭指令的页面
  跨源标签页、用户手动输入地址打开的同源标签页，脚本都没有权限直接关闭。

具体实现方案 #

1. 在根注入器下新建标签管理服务，在应用运行内存中维护已打开标签页的引用映射
   （window.open返回的窗口引用是不可序列化的原生对象，无法存入localStorage/sessionStorage，仅能靠运行时内存存储）
   服务代码示例：

   // tab-manage.service.ts
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class TabManageService {
     // 内存映射：key为目标URL，value为对应标签页的Window对象引用
     private openedTabMap: Record<string, Window> = {};
   
     /**
      * 打开目标标签页，自动关闭同URL的已存在旧标签
      */
     openAndReplaceTab(targetUrl: string) {
       // 检查是否有对应的旧标签引用
       const oldTabRef = this.openedTabMap[targetUrl];
       if (oldTabRef) {
         try {
           // 直接关闭旧标签
           oldTabRef.close();
         } catch (err) {
           // 捕获跨源、标签已被手动关闭的异常，不阻塞新标签打开流程
           console.warn('无法访问旧标签引用', err);
         }
         // 删除失效的引用记录
         delete this.openedTabMap[targetUrl];
       }
   
       // 打开新标签页，保存引用
       const newTabRef = window.open(targetUrl);
       if (newTabRef) {
         this.openedTabMap[targetUrl] = newTabRef;
       }
     }
   }
   

2. 在所有需要打开链接的组件中注入该服务，替换原有直接调用window.open的逻辑即可
   原无效代码：

   window.open('http://somedomain.com');
   

   替换为：

   // 注入服务后调用
   this.tabManageService.openAndReplaceTab('http://somedomain.com');
   

边界场景补充处理 #

如果运行Angular应用的页面发生过刷新，内存中存储的标签引用会随页面重载清空，此时无法直接拿到旧标签的引用，可以配合BroadcastChannel API做跨标签页自关闭：

• 在所有同源的应用入口（比如AppComponent的初始化逻辑）添加监听逻辑：

  // app.component.ts
  import { OnInit } from '@angular/core';
  
  export class AppComponent implements OnInit {
    // 初始化跨标签广播通道
    private tabChannel = new BroadcastChannel('app_tab_switch');
  
    ngOnInit() {
      // 监听同频道内的关闭指令
      this.tabChannel.onmessage = (event) => {
        // 匹配当前页URL和指令要求关闭的URL一致时，自动关闭自身
        if (event.data.action === 'CLOSE_SELF' && event.data.url === window.location.href) {
          window.close();
        }
      };
    }
  }
  

• 在标签管理服务的打开方法中，当旧标签引用失效时，向广播通道发送关闭指令：

  // 在openAndReplaceTab方法的异常捕获块中添加
  this.tabChannel.postMessage({
    action: 'CLOSE_SELF',
    url: targetUrl
  })
  

常见踩坑提示 #

• Chrome 仅允许脚本关闭自身通过window.open打开的标签页，用户手动输入地址打开的同源标签，脚本调用close()会抛出权限错误，控制台提示Scripts may close only the windows that were opened by it
• 跨源的目标标签页无法拿到引用，也无法通过广播通道通信，这类场景没有合规的Web API可以实现自动关闭
• 不要给window.open传固定的窗口name参数，否则会复用已有name的标签页跳转，不符合“先关旧、再开新”的需求

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