Angular 13+调用window.open抛出Illegal invocation错误求助

• 绑定window上下文调用window.open
  项目中可能存在window对象被Angular Zone或第三方库包装的情况，导致调用window.open时上下文丢失，触发非法调用错误。可以提前保存绑定了window上下文的原始open方法：

  // 组件类中定义
  private readonly originalWindowOpen = window.open.bind(window);
  
  openPopup(): void {
    this.originalWindowOpen("https://www.google.com", "popup", "width=600,height=400,left=200,top=200");
  }
  

• 检查并调整Content Security Policy（CSP）配置
  如果项目配置了严格的CSP，可能会阻止弹窗加载外部链接。打开项目的index.html，检查是否有CSP的meta标签，添加允许弹窗和目标域名的规则：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://www.google.com; allow-popups;">
  

  注意：CSP配置需结合项目安全需求调整，避免过度放宽权限。

• 在Angular Zone外部执行调用
  Angular的Zone会监控异步操作并触发变更检测，可能对window对象的方法进行包装，导致调用异常。可以通过NgZone跳出Angular上下文执行：

  import { NgZone } from '@angular/core';
  
  // 构造函数注入NgZone
  constructor(private ngZone: NgZone) {}
  
  openPopup(): void {
    this.ngZone.runOutsideAngular(() => {
      window.open("https://www.google.com", "popup", "width=600,height=400,left=200,top=200");
    });
  }
  

• 排查第三方库或全局代码对window的修改
  部分第三方库（如广告插件、安全工具）或自定义全局代码可能改写了window.open方法。在浏览器控制台执行console.log(window.open)，查看输出是否为原生函数。如果是被包装的函数，定位并移除相关改写代码。

• 信任目标URL（可选）
  若Angular的安全机制拦截了未信任的外部URL，可使用DomSanitizer处理：

  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  constructor(private sanitizer: DomSanitizer) {}
  
  openPopup(): void {
    const safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.google.com");
    window.open(safeUrl.toString(), "popup", "width=600,height=400,left=200,top=200");
  }
  

Stackblitz环境纯净，无项目自定义配置、第三方依赖或CSP限制，因此代码可以正常运行。

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