javascript - html 表单从网页传递到子 iframe 时不保留其元素的属性？

Question

我有一个由用户在网页上填写的表单， 当用户提交表单时，我会弹出一个 Bootstrap 模式对话框，该对话框中有一个 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 reporting services，并且它将每个输入元素作为参数。我无法控制这个。

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

Answer 1

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

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

使用 jQuery (see docs):

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

或者纯 JavaScript ( see docs ):

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

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

<小时/>

顺便说一句，为什么要在模式中复制表单？您是否正在为用户重新创建它作为“请审查”类型的内容？这似乎是一个奇怪的过程。我只是问，因为也许有更好的方法来完成你所要求的事情。不管怎样，我给出的答案应该有帮助。