我正在使用 Google Apps Script Web App 和 HtmlService 来提供内容,并且我正在尝试使用 appendChild 将输入元素动态添加到表单中。它适用于 Chrome 24 和 IE 10,但 Firefox 19.0.2 不会更新表单的元素列表。
因此,它在网页上正确显示,但在 Firefox 中,使用 appendChild 添加到表单的任何输入元素都不是 form.elements 集合的一部分。值得注意的是,仅当使用 Caja 清理 HTML 时才会出现此问题,如果我在jsfiddle中使用相同的代码,它可以正常工作。
这个问题可以在这里看到,也就是下面的代码:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function print(form)
{
var str = "";
for(var v = 0; v < form.length; v++)
{
str += "<br>" + form[v].nodeName + "." + form[v].id + ": ";
if(form[v].elements != undefined)
for(var w = 0; w < form[v].elements.length; w++)
{
str += form[v].elements[w].name + ", ";
}
}
return str;
}
function submitForm()
{
document.getElementById("nameLookupHelp").innerHTML = (print(document.forms)) + "<br>Total Elements:" + document.forms[0].elements.length;
return;
}
function onLoad()
{
var name = document.getElementById("nameForm");
var t = document.createElement("input");
t.name = "TestInput";
//t.id = "TestInput";
name.appendChild(t);
}
</script>
</head>
<body onload="onLoad()">
<form name="nameForm" id="nameForm">
<input name="nameLookup" id="nameLookup">
<input type="button" id="bntNameForm" onclick="submitForm(this)" value="Lookup">
<div class="" id="nameLookupHelp">Please enter your name.</div>
</form>
</body>
</html>
根据我在该主题上的发现,Firefox 不喜欢无效的 HTML。但是,据我所知,HTML 输出是完全有效的。此外,由于它适用于 jsfiddle,我认为问题必须与 Caja 与我的 HTML 和 Firefox 交互的方式有关。
另外,最后一件事,如果我在 Firefox 中检查表单元素并双击标记面板中的表单标签,然后单击关闭(取消编辑),Firefox 然后会检测到所有元素并且一切正常。Firefox 显示为 HTML 的内容并没有改变。
提前感谢您的帮助。