2
我正在使用Google Apps腳本Web應用程序和HtmlService來提供內容，我試圖通過appendChild動態地將輸入元素添加到窗體中。它適用於Chrome 24和IE 10，但Firefox 19.0.2不會更新表單的元素列表。Google Caja appendChild不更新Firefox中的form.elements
因此，它在網頁上正確顯示，但在Firefox中，任何添加了appendChild的表單輸入元素都不是form.elements集合的一部分。值得注意的是，這個問題僅在HTML使用Caja進行消毒時纔會出現，如果我在jsfiddle中使用相同的代碼，它可以正常工作。
的問題可以看出here，這就是下面的代碼：
<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雖然沒有改變。
非常感謝您的幫助。