怎么利用HTML的form的target属性将表单响应结果显示在iframe中-html教程-PHP中文网

form 的 target 属性必须与 iframe 的 name 属性完全一致（大小写敏感），而非 id；iframe 用于无刷新提交时，服务端须返回可渲染的 html 且需配置允许嵌入的响应头。

怎么利用html的form的target属性将表单响应结果显示在iframe中

form 的 `target` 属性必须匹配 `iframe` 的 `name`，不是 `id`

这是最常出错的地方：很多人给 iframe 写了 id="myFrame"，然后在 form 里写 target="myFrame"，结果响应依然在新标签页打开。因为 target 查找的是 name 属性，和 id 完全无关。

正确做法是：

iframe 必须有 name 属性，例如 <iframe name="resultFrame"></iframe>
form 的 target 值必须与之**完全一致**（大小写敏感），例如 <form target="resultFrame"></form>
不需要 id，也不需要 JavaScript 绑定；纯 HTML 就能生效

提交后 iframe 内容被替换，但页面不刷新——这是预期行为

使用 target + iframe 是浏览器原生的“无刷新提交”机制，本质是把服务端响应直接渲染进指定 iframe。它不触发当前页面 DOM 变化，也不走 AJAX 流程。

这意味着：

服务端返回的必须是完整 HTML 片段（或至少是可被浏览器直接解析渲染的内容），比如 <p>提交成功</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>；返回 JSON 字符串会原样显示为文本，不可交互
如果服务端返回 302 重定向，浏览器会把重定向目标页加载进该 iframe，而非当前页
iframe 的 src 属性不会自动更新，仍为 about:blank 或初始值，这属于正常现象

常见错误：表单提交后空白 iframe 或报错 `Refused to display ... in a frame`

这通常不是 HTML 写法问题，而是服务端响应头或跨域策略拦截导致的。

检查以下几点：

服务端是否设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'？这两者都会阻止页面被嵌入任何 iframe
前后端域名不一致时，需确保服务端明确允许当前页面嵌入，例如设置 X-Frame-Options: ALLOW-FROM https://your-site.com（旧协议）或更推荐的 Content-Security-Policy: frame-ancestors https://your-site.com
本地开发时用 file:// 协议打开 HTML，部分浏览器会直接拒绝加载 iframe，必须通过本地服务器（如 python3 -m http.server）访问

想获取 iframe 中的服务端响应内容？不能直接读，但有替代路径

由于同源限制，父页面 JS 默认无法读取跨域 iframe 的 contentDocument。即使同域，iframe 加载完成前就读取也会失败。

稳妥做法是：

同域前提下，在 iframe 加载完成后用 iframe.onload 回调读取：

document.querySelector('iframe[name="resultFrame"]').onload = function() {
  const doc = this.contentDocument || this.contentWindow.document;
  console.log(doc.body.textContent);
};