html表单没有保存它's元素'从网页传递到子iframe时的属性

html form not holding it's elements' attributes when being passed from web page to child iframe?

本文关键字：属性 iframe 网页 元素 表单 保存 html      更新时间：2023-09-26

我有一个表单，由用户在网页上完成，当用户提交表单时，我会弹出一个引导模式对话框，这个对话框中有一个iframe，它从父窗口加载表单，调用其中的一个函数，如下所示：

//parent window
var formToSubmit;
function getForm(){
   return formToSubmit;
}
$("#submitButton").click(function(){
   //alterations to the elements in $("mainForm")
   formToSubmit = $("mainForm");
   $("#modalDialog").modal();
   //...
});
//modal iframe
var parentForm = parent.window.getForm();
$("#mainDiv").append(parentForm[0].outerHTML);
$("form").submit(function(){
   parent.window.closeModalWindow(); //not sure whether this will close AFTER the form is completely submitted yet
});
$("form").submit();

我的问题是，我将这些表单提交给microsoft-sql-server报告服务，它将每个输入元素都作为一个参数。我无法控制这件事。

因此，当用户在主窗体中单击提交时，我禁用了所有不能设置为参数的元素，问题是；当我从父窗口获得表单并将其附加到模态iframe时，似乎所有这些更改都丢失了，有什么方法可以保留吗？

您的问题可能与表单上对outerHTML的调用有关。首先，outerHTML的实现在不同的浏览器中是不同的，所以如果可能的话，我会避免使用它。其次，outerHTML不一定包含活动DOM元素，而只是将其作为字符串进行转储。

因此，我建议在将表单传递给您的IFRAME之前对其进行深度克隆。

使用jQuery（参见文档）：

$("#mainDiv").append(parentForm.clone(true));

或者纯JavaScript（请参阅文档）：

document.getElementByid('mainDiv').appendChild(parentForm[0].cloneNode(true));

我运行了一些测试来验证这一点，只要你正在克隆表单，你就会得到你期望的结果。

作为旁注，你为什么要用模态来复制这个形式？你是不是在为用户重新创建一个"请查看"类型的东西？这似乎是一个奇怪的过程。我只是问，因为也许有更好的方法来满足你的要求。不管怎样，我给出的答案应该会有所帮助。

相关文章：