无刷新提交依赖form的target属性指向同名iframe，而非js拦截；target必须设在form标签上且与iframe的name严格匹配；跨域时需用postmessage通信，监听load事件并确保响应为完整html。

无刷新提交不是靠 JS 拦截，而是用 target 指向一个 <iframe></iframe>——这是纯 HTML 就能跑通的老办法，至今在内网系统、低配终端或 CSP 严格环境里仍最稳。

form 的 target 必须写在

标签上，不是按钮也不是 JS

target 是 <form></form> 的原生属性，只对原生提交生效。写在 <button></button> 或 <input type="submit"> 上会被浏览器直接忽略。

• ❌ 错误写法：<button type="submit" target="_blank">提交</button>
• ✅ 正确写法：<form target="my-frame">...</form>，再配 <iframe name="my-frame"></iframe>
• JS 动态改也得操作 form 元素本身：document.querySelector("form").target = "my-frame"，别去碰按钮的 form.target
• 用了 event.preventDefault() 或 Vue/React 的 @submit.prevent，target 就彻底失效——它只管原生提交路径

target 值必须和 iframe 的 name 完全匹配（大小写敏感）

哪怕只差一个字母或空格，浏览器就会新建标签页而不是载入 iframe——这不是 bug，是规范行为。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• <iframe name="resultFrame"></iframe> → target 必须是 "resultFrame"，不能是 "resultframe" 或 "result-frame"
• name 不是 id，<iframe id="resultFrame"></iframe> 配 target="resultFrame" 一定失败
• iframe 必须在 DOM 中静态存在，JS 动态创建后赋 name 属性，target 不认
• 如果页面有多个同名 iframe，只第一个生效；建议用唯一、语义化的名字，比如 "upload-handler"

怎么监听 iframe 提交后的响应结果？

iframe 载入完成时触发 load 事件，但跨域时无法读取内容——这点容易被忽略，导致 JS 提取失败。

• 同源情况下，监听方式：document.querySelector('iframe[name="my-frame"]').addEventListener("load", () => { /* 读取 iframe.contentDocument */ })
• 后端返回必须是完整 HTML（含 ），不能只返回 JSON 或片段，否则 contentDocument 可能为空或报错
• 跨域 iframe 的 load 事件能触发，但 contentDocument 读取会抛 SecurityError；此时只能靠服务端在响应中注入 parent.postMessage()
• 常见错误：没等 iframe 加载完就尝试读取内容，应始终在 load 回调里操作，不要用 setTimeout 猜时机

formtarget 按钮级覆盖比 form target 更灵活

当一个表单需要多种提交目标（保存草稿、预览、导出），formtarget 是唯一零 JS 解法，且优先级高于 <form target></form>。

• <button type="submit" formtarget="_self">保存草稿</button>：不跳转，适合静默提交
• <button type="submit" formtarget="_blank">预览</button>：新标签页打开渲染结果（注意：CSP 或弹窗拦截可能让它退化为 _self）
• <button type="submit" formtarget="pdf-iframe">导出 PDF</button>：必须对应 <iframe name="pdf-iframe"></iframe>
• formtarget 只对 type="submit" 或 type="image" 有效；type="button" 加了也白加

真正难的不是配置 target，而是确保 iframe 同源、响应结构合法、JS 监听时机准确——这三个点漏掉任何一个，都会让“无刷新”变成“刷新失败”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！