window.open尺寸位置参数需同时指定width、height、left、top且无空格，如'width=800,height=600,left=100,top=50'；现代浏览器常忽略left/top，仅在用户触发、file://协议或白名单下生效。
window.open 的尺寸与位置参数怎么写才生效
浏览器对 window.open 的尺寸和位置控制有严格限制，不是所有参数都起作用——尤其在现代 Chrome/Firefox 中，除非用户主动触发（比如点击事件），否则会被拦截或忽略。必须同时传入完整 features 字符串，且不能有空格、不能用驼峰（如 width 不能写成 Width）。
正确写法示例：
window.open('https://example.com', '_blank', 'width=800,height=600,left=100,top=50');
-
width和height是像素值，不带单位（width=800✅，width=800px❌） -
left/top指新窗口左上角相对于屏幕左上角的坐标，不是相对于当前窗口 - 所有键值对之间用英文逗号分隔，**不能有空格**（
width=800, height=600会失效） - Chrome 92+ 起默认禁用
left/top，除非站点被用户标记为“允许弹窗”或运行在本地文件协议（file://）下
为什么设置了 left/top 却总在屏幕中央打开
这是现代浏览器的主动防护策略：为防止恶意网站遮挡关键 UI 或模拟系统对话框，left 和 top 在多数情况下被强制忽略，窗口始终居中。只有满足以下任一条件时才可能生效：
- 用户刚完成一次显式交互（例如
click事件内调用window.open） - 当前页面是通过
file://协议打开的本地 HTML 文件 - 目标站点已被用户手动添加到浏览器的“允许弹出窗口”白名单（Chrome 设置 → 隐私设置 → 弹出窗口和重定向）
- 使用
popup类型的 PWA（需 manifest + service worker 配合，非纯 HTML 可解）
替代方案：用 CSS + iframe 模拟“指定尺寸位置”的弹窗
当真实窗口控制不可靠时，更可控的做法是用 div + iframe 实现模态层，再用 JavaScript 控制其 style.left/style.top 和 style.width/style.height：
示例结构：
<div id="modal" style="position:fixed;width:800px;height:600px;left:100px;top:50px;z-index:1000;"> <iframe src="https://example.com" style="width:100%;height:100%;border:none;"></iframe> </div>
- 完全绕过浏览器对
window.open的限制 - 可精确控制位置、大小、层级、动画
- 注意同源策略：跨域 iframe 无法读取内容，但显示不受影响
- 移动端需额外处理
viewport缩放和触摸穿透问题（加pointer-events: none到遮罩层）
常见错误导致 window.open 完全不执行
除了参数格式问题，以下情况会让 window.open 静默失败（无报错但没反应）：
- 在异步回调（如
setTimeout、fetch.then、Promise）中调用 —— 浏览器判定为非用户驱动 - 未指定第二个参数（
windowName），或传了null/undefined（应传'_blank'或具体字符串） - features 字符串中包含非法字符（如中文逗号、全角符号、换行）
- URL 协议不合法（如
http:/example.com少了一个斜杠） - 调用前页面尚未完成加载（
DOMContentLoaded之前），部分浏览器会拒绝
真正稳定可用的调用时机，只该出现在用户鼠标点击、键盘回车、触屏 tap 这类原生事件处理器内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
