Google Apps Script Web App と HtmlService を使用してコンテンツを提供しており、appendChild を使用してフォームに入力要素を動的に追加しようとしています。Chrome 24 および IE 10 で動作しますが、Firefox 19.0.2 はフォームの要素リストを更新しません。
そのため、Web ページでは正しく表示されますが、Firefox では、appendChild を使用してフォームに追加された入力要素は、form.elements コレクションの一部ではありません。この問題は、HTML が Caja でサニタイズされている場合にのみ発生することに注意してください。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 と対話する方法に問題があると思われます。
また、最後に 1 つ、Firefox でフォーム要素を検査し、マークアップ パネルのフォーム タグをダブルクリックしてオフ (編集をキャンセル) すると、Firefox はすべての要素を検出し、すべて正常に動作します。ただし、Firefox が HTML として表示するものは変わりません。
よろしくお願いします。