target="_blank"在新标签页打开而非弹窗；真正弹窗需window.open()显式指定尺寸等参数，并由用户手势触发。
form 的 target="_blank" 为什么没在新标签页打开？
因为 target="_blank" 默认在新标签页打开，不是弹窗；要实现“弹窗”，必须配合 window.open() 手动控制窗口行为，form 自身不支持弹出式窗口（即带尺寸、无地址栏的独立窗口）。
常见错误是以为 target="myPopup" 加上 JS 创建同名窗口就能自动复用——实际需严格匹配窗口名称，且首次调用必须由用户手势（如 click）触发，否则会被浏览器拦截。
-
target="_blank"：开新标签页，受浏览器设置影响（可能被合并到当前页） -
target="popup"：仅当已有名为"popup"的窗口存在时才复用，否则新开标签页（非弹窗） - 真正弹窗必须用
window.open(url, name, features)显式指定width、height等参数
用 JavaScript 拦截 form 提交并弹出定制窗口
核心思路是阻止默认提交，用 fetch 或表单序列化 + window.open 手动发起请求，并把结果写入弹窗文档。注意：跨域响应无法写入弹窗，且 POST 数据需通过 form.submit() 借力或构造 iframe 中转。
更稳妥的做法是先开空弹窗，再动态创建 form 并提交过去：
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
const popup = window.open('', 'popup', 'width=600,height=400,resizable=yes');
const form = popup.document.createElement('form');
form.method = 'POST';
form.action = this.action;
// 复制所有字段
Array.from(this.elements).forEach(el => {
if (el.name && !el.disabled) {
const input = popup.document.createElement('input');
input.type = 'hidden';
input.name = el.name;
input.value = el.value;
form.appendChild(input);
}
});
popup.document.body.appendChild(form);
form.submit();
});
target 属性与 window.open 的兼容性陷阱
不同浏览器对弹窗特征字符串（features）的支持差异大：Chrome 忽略 location=no，Firefox 限制最小尺寸，Safari 默认屏蔽所有弹窗除非用户主动允许。更重要的是，window.open 在非用户触发上下文中（如异步回调、定时器）必然失败。
- 必须确保事件监听绑定在
click或submit这类明确用户动作上 -
target值若含空格或特殊字符（如target="my popup"），部分旧浏览器会静默降级为_blank - HTTPS 页面中打开 HTTP 弹窗会被现代浏览器直接阻止
- 弹窗内容若需读取父页面数据，需同源且注意
popup.opener可能为null（如父页已关闭）
替代方案：用 modal + fetch 显示服务端响应
真正需要“不跳转、看结果”的场景，比弹窗更可靠的是阻断提交、用 fetch 获取响应，再渲染到页面内 <dialog></dialog> 或 div 中。这样规避所有弹窗拦截、跨域、兼容性问题，也更符合现代 UX。
示例关键点：
- 用
e.preventDefault()阻止默认提交 - 收集表单数据：用
new FormData(form)自动处理文件和编码 - 提交后更新
<dialog></dialog>内容：dialog.querySelector('pre').textContent = await res.text() - 服务端返回 JSON 更易解析，避免 HTML 注入风险
弹窗看似直观，但实际调试成本高、失败不可见、移动端基本失效——多数情况下，该放弃就放弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
