在 iframe 中发布表单答案

【问题标题】：POST a form in an iframe在 iframe 中发布表单
【发布时间】：2011-03-01 09:14:04
【问题描述】：

我想在 iframe 中发布一个表单，生成方式如下：

我的 JS 在页面内加载一个 iframe，向 iframe 添加一个表单并提交表单。我想要发生的是加载该请求结果的 iframe。因此，我实际上想发布一个表单并在 iframe 中呈现结果，而不触及父级（除了首先放置 iframe 以供显示）。

我正在使用此答案中的代码：

JavaScript post request like a form submit

但我无法让它不重新加载父级。我发布表单，而不是刷新 iframe，而是刷新整个父级。我不知道为什么会这样，因为它发布到的 url 是不同的，并且至少会重定向到那里。

谁能帮我解决这个问题？我只想要一个 iframe 内的帖子，而且基本上只在 iframe 内。

编辑：经过更多研究，显然没有正确创建表单。我正在使用 document.createElement("form") 然后 document.getElementById("my_iframe_id").appendChild(form) 来追加它，但它似乎无法正常工作。

【问题讨论】：

标签： javascript html forms iframe post

【解决方案1】：

正确，因为您正在当前文档中创建表单节点。

document.getElementById("my_iframe_id").contentWindow.document.createElement('form');

在 iframe 中创建它。

【讨论】：

我已经得到了你指定的 iframe 的文档，并且我已经更改了代码以正确创建表单，但是表单仍然重新加载整个页面......我还在 iframe 中创建了控件，我还能做错什么？
当您创建表单时，您可以在 iframe 中看到它（使用 firebug 或等效项）？您可以添加 .target = '_self' - 但这是默认行为，所以没关系。
你知道，我不知道！使用 firebug，我只能在 iframe 中看到标签，但如果我在 iframe 上执行 innerHTML，我确实会看到它......这很奇怪......
经过更多实验后，表单似乎是 iframe 的子级，但实际上并不是 iframe 内部。也就是说，我可以通过使用 javascript 操作 DOM 来查看它，但不能在 iframe 本身中...
所以尝试将它添加到框架的主体中？ document.getElementById('my_iframe_id').contentWindow.document.body.appendChild(form);

【解决方案2】：

它现在可以工作了，一部分是“文档”是错误的，正如 Dan 所说，另一部分是，当插入 iframe 时，需要使用 document.getElementById(div).contentWindow.document.childNodes[0].appendChild(form) 而不仅仅是 document.getElementById(div).innerHTML。

【讨论】：

【解决方案3】：

不确定这有多大帮助，但您指出的答案并未为表单提供名称/ID。如果您尝试使用 document.getElementById('myForm').submit() 之类的内容发布表单，您可能会遇到问题，因为您的表单没有名称/ID。

过去，当页面上有多个表单时，我在提交表单时遇到了问题，显然提交了错误的表单。在每种情况下，给表单一个名称/id，然后通过 id 获取表单并调用submit() 似乎可以解决问题。

【讨论】：

遗憾的是，这对重新加载整个页面没有帮助，但谢谢！