Google Caja appendChild不更新Firefox中的form.elements

我正在使用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虽然没有改变。

非常感谢您的帮助。

来源

2013-03-14 Joshua Neuenhoff