window.close() 仅对 window.open() 打开的窗口有效，现代浏览器禁止脚本关闭用户手动打开的标签页；弹窗需用 about:blank 等同源地址创建并写入内容；移动端（尤其 iOS Safari）基本不支持该方法，应优先使用 DOM 模态层模拟关闭。
直接调用 window.close() 为什么经常失效
现代浏览器（Chrome、Firefox、Edge）默认只允许通过 window.open() 打开的窗口被脚本关闭。如果页面是用户手动打开（比如点击链接、输入地址、刷新后），window.close() 会静默失败，控制台可能报错 Scripts may close only the windows that were opened by them。
这不是 bug，是安全策略。所以别指望在普通页面里写个按钮就关掉整个标签页。
- 仅对
window.open()创建的弹窗有效 - 某些浏览器（如 Safari）即使弹窗也需用户交互触发才允许关闭
- Vue/React 组件内调用也要遵循同一规则，和框架无关
用 window.open() 创建可关闭弹窗的最小可行写法
如果你要自己弹出一个窗口并保留关闭能力，必须用 window.open()，且不能省略参数（尤其不能传空字符串或 '' 作为 URL）。
const popup = window.open('about:blank', '_blank', 'width=400,height=300');
// 然后写入内容（可选）
popup.document.write('<h2>弹窗内容</h2><button onclick="window.close()">关闭</button>');
popup.document.close();
注意：
立即学习“前端免费学习笔记（深入）”；
-
about:blank是安全起点，避免跨域问题 - 第三个参数（features）不能省略，否则 Chrome 可能降级为新标签页且不可关
- 弹窗内容必须由 opener 主动写入，不能跳转到外部域名再试图关——那又触发同源限制
替代方案：用 CSS + JS 模拟“关闭弹窗”
绝大多数场景下，所谓“关闭 HTML 弹窗”，其实是要隐藏一个 <div> 层，不是真关浏览器窗口。这是最可靠、兼容性最好的做法。
- 给弹窗容器加
display: none或visibility: hidden（后者保留占位） - 配合
opacity和transition做淡出动画 - 记得移除
body的overflow: hidden（如果遮罩层启用过） - 焦点管理很重要：关闭后应把焦点还给触发按钮，否则影响无障碍访问
示例逻辑（不依赖框架）：
document.getElementById('close-btn').addEventListener('click', () => {
document.getElementById('modal').classList.add('hidden');
document.getElementById('trigger-btn').focus();
});
移动端特别注意：window.close() 在 iOS Safari 几乎完全不可用
iOS 上，即使你用 window.open() 弹出页面，Safari 也不支持脚本关闭。它会忽略调用，也不报错。用户只能手动点右上角 ×。
所以面向移动端的产品，必须放弃“自动关窗口”思路：
- 所有弹窗都走 DOM 模态层（
<dialog>或自定义<div>） - 避免用
window.open()做业务入口，改用单页路由或 iframe - 如果必须跳转新页（比如 OAuth 授权），关闭动作应由服务端重定向回原页，并带参数通知前端“流程结束”
真正难的从来不是写一行 window.close()，而是判断这个操作到底该由谁关、在哪关、关了之后状态怎么同步。浏览器不会替你做业务决策。
