form的target属性必须严格匹配iframe的name值（大小写敏感），且iframe须提前挂载、服务端返回text/html响应并配置CSP frame-ancestors，否则将空白或跳转新窗口。
form 的 target 属性必须指向 iframe 的 name
这是整个机制能工作的前提。浏览器看到 form 的 target 值和某个 iframe 的 name 一致，就会把提交响应写进那个 iframe，而不是跳转当前页面。
常见错误是：name 和 target 拼写不一致、大小写不匹配、或 iframe 被动态创建后未正确设置 name（比如用 id 当成 name 用）。
- iframe 必须有
name属性，且不能是空字符串或纯数字（如name="upload-frame"可行，name="123"在部分老浏览器中可能失效） - form 提交前必须已存在该 iframe；若动态插入，要确保插入完成后再设置
form.target - 不要依赖
id——target只认name，不是id
服务端返回内容必须可被父页面安全读取
iframe 加载完响应后，父页面需要从中提取结果。但跨域、文档未就绪、或响应格式不对都会导致读取失败。
典型做法是让服务端返回一段内联 <script>，调用父页面预设的回调函数，例如：
立即学习“前端免费学习笔记（深入）”；
<script type="text/javascript">
window.parent.uploadSuccess && window.parent.uploadSuccess({
"status": "success",
"url": "/uploads/abc123.jpg"
});
</script>
- 必须检查
window.parent是否存在，避免在 iframe 独立打开时报错 - 回调函数需在父页面全局作用域定义（如挂到
window上），不能是模块内局部函数 - 服务端响应 Content-Type 建议设为
text/html，避免浏览器尝试解析为 JSON 或 XML 导致执行中断 - 如果 iframe 里返回的是纯 JSON 字符串（无 script 包裹），父页面无法直接读取——因为同源策略限制
iframe.contentDocument访问
隐藏 iframe 但别用 display:none 影响 onload 触发
很多教程用 style="display:none" 隐藏 iframe，但在某些浏览器（尤其是旧版 IE 和 Safari）中会导致 load 事件不触发或延迟，进而让上传状态卡住。
- 更稳妥的隐藏方式是：
width="0" height="0" style="position: absolute; left: -9999px;" - 务必监听 iframe 的
load事件，而不是表单的submit后立刻读取 —— 此时 iframe 内容很可能还没加载完 - 加载完成后应立即移除 iframe（
iframe.remove()），防止重复绑定或内存泄漏 - 如果用户连续上传多次，每次都要生成新 name（如加时间戳或随机数），避免 target 冲突或缓存旧响应
文件校验只能做前端辅助，不能替代后端检查
有人以为给 input[type="file"] 加 accept=".jpg,.png" 就能阻止非法文件，其实它只影响文件选择器界面，用户仍可手动修改文件名绕过。
- 前端可快速拦截明显异常：检查
file.size是否为 0、是否超过 5MB、扩展名是否在白名单内（file.name.toLowerCase().endsWith(".pdf")） - 但 MIME 类型（
file.type）完全由浏览器提供，不可信；攻击者可伪造.html文件却声明为image/jpeg - 真正有效的校验必须在服务端：检查文件头（magic number）、限制上传目录权限、重命名文件、隔离可执行资源
- iframe 上传本身不提供任何安全边界 —— 它只是传输通道，和直接 form 提交一样裸露
target 属性不会自动清空。如果用户再次点击提交按钮（比如误点两次），而 iframe 已被移除，第二次提交会直接跳转页面 —— 这种“偶发刷新”极难复现和调试。 
