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> 层，不是真关浏览器窗口。这是最可靠、兼容性最好的做法。
<ul>
<li>给弹窗容器加 <code>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 也不支持脚本关闭。它会忽略调用，也不报错。用户只能手动点右上角 ×。
所以面向移动端的产品，必须放弃“自动关窗口”思路：
