原生JS开发Web组件调用window.open报not a function错误如何解决？

问题原因 #

触发Uncaught TypeError: window.open is not a function报错的核心是当前运行环境中的window.open已经不是浏览器原生的弹窗方法，常见诱因有4类：

• 全局作用域的open被覆盖：你自身的业务代码或是引入的第三方脚本，在全局声明了同名的open变量/函数，或是直接对window.open做了赋值操作，覆盖了原生方法。你可以在浏览器控制台执行console.log(window.open)验证，原生方法的输出应为ƒ open() { [native code] }。
• 弹窗权限被限制：如果你的页面嵌套在iframe中使用，且iframe的sandbox属性未配置allow-popups权限，浏览器会主动禁用window.open方法，此时它的值为undefined，调用就会抛出类型错误。
• 全局window被局部变量遮蔽：检查组件上下游代码，是否存在某个作用域内声明了名为window的变量（例如const window = {}），导致该作用域内访问的window不是浏览器原生全局对象，自然不存在open方法。
• 浏览器扩展劫持：部分广告拦截、隐私防护类扩展会禁用window.open方法，避免恶意弹窗，也会触发该报错。

另外你的代码中window.open的URL参数存在不规范问题：没有带https://协议前缀，浏览器会将其识别为当前站点的相对路径跳转，虽然不会触发当前的类型错误，但会导致跳转目标不符合预期，需要同步修正。

修复方案 #

1. 排查所有全局脚本，删除对window.open的赋值操作，同时避免全局声明open命名的变量/函数，若有自定义open逻辑可以重命名为其他标识符。
2. 如果页面嵌套在iframe中使用，给iframe添加allow-popups权限，示例：

<iframe src="你的页面地址" sandbox="allow-popups allow-scripts 其他需要的权限"></iframe>

3. 补全window.open的URL协议，修正调用代码：

window.open('https://www.google.com', "_blank");

4. 新增兼容兜底逻辑，避免报错阻断后续代码运行：

if (typeof window.open === 'function') {
  window.open('https://www.google.com', "_blank");
} else {
  // 可自定义降级方案，比如提示用户手动复制链接
  console.log('当前环境不支持弹窗跳转');
}

5. 临时禁用所有浏览器扩展，验证是否是扩展拦截导致的问题，如果是可以调整扩展的站点权限配置。

内容的提问来源于stack exchange，提问作者The Dead Man