HTML元素formtarget属性怎么实现表单在新iframe中提交-html教程-PHP中文网

formtarget 属性不支持 iframe 名称，仅识别 _self、_blank、_parent、_top；正确做法是使用 form 的 target 属性并匹配 iframe 的 name 值，确保同源且 name 拼写一致。

html元素formtarget属性怎么实现表单在新iframe中提交

formtarget 属性不支持 iframe 名称作为目标值

直接给 formtarget 设成 "myIframe" 是无效的——浏览器会忽略它，表单仍按默认行为提交（通常是当前页面跳转）。formtarget 只认标准的 _self、_blank、_parent、_top，不识别自定义 iframe 的 name 或 id。

正确做法：用 form 元素的 target 属性指向 iframe name

target 是 <form></form> 原生支持的属性，且明确接受 iframe 的 name 值。只要 iframe 有 name（不是 id），就能精准投递。

实操要点：

iframe 必须设置 name 属性，例如：<iframe name="resultFrame"></iframe>
form 设置 target="resultFrame"，不是 formtarget
确保 iframe 和 form 在同一源，否则跨域时提交可能被拦截或响应无法显示
若用 JavaScript 动态提交，可临时修改 form.target 再调用 submit()

示例：

为什么不用 formtarget + iframe？

因为 formtarget 是为 <button></button> 或 <input type="submit"> 提供的“覆盖级”提交目标，但它只作用于浏览器预定义的 browsing context 名称。即使 iframe 存在且 name 匹配，formtarget="myFrame" 也会被当作无效值降级到 _self。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

常见误判现象：

控制台无报错，但页面跳转而非 iframe 内加载
iframe 显示 “about:blank”，说明提交未命中目标
检查元素发现 iframe 的 name 拼写与 formtarget 不一致（比如大小写、空格）——但这只是表象，根源是属性本身不支持

需要动态切换提交目标？用 JavaScript 控制 form.target

如果一个表单要有时提交到 iframe、有时提交到新窗口，不要依赖多个 formtarget，而是改 form.target：

const form = document.querySelector('form');
document.getElementById('toIframeBtn').addEventListener('click', () => {
  form.target = 'resultFrame';
  form.submit();
});
document.getElementById('toNewTabBtn').addEventListener('click', () => {
  form.target = '_blank';
  form.submit();
});

注意点：