Google Caja appendChild无法在Firefox中更新form.elements

Question

I'm using a Google Apps Script Web App and HtmlService to serve the content and I'm trying to dynamically add input elements to a form with appendChild. 我正在使用Google Apps脚本Web App和HtmlService来提供内容，并且正在尝试使用appendChild将输入元素动态添加到表单中。 It works in Chrome 24 and IE 10, but Firefox 19.0.2 doesn't update the elements listing for the form. 它可以在Chrome 24和IE 10中使用，但Firefox 19.0.2不会更新该表单的元素列表。

So, it displays correctly on the webpage, but in Firefox, any input elements added with appendChild to the form aren't part of the form.elements collection. 因此，它可以正确显示在网页上，但是在Firefox中，任何将appendChild添加到表单的输入元素都不属于form.elements集合。 It's worth noting this issue only appears when the HTML is sanitized with Caja, if I use the same code in jsfiddle it works fine. 值得注意的是，仅当使用Caja清理HTML时，才会出现此问题，如果我在jsfiddle中使用相同的代码，则效果很好。

The issue can be seen here , which is just the following code: 可以在这里看到问题，它只是以下代码：

<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>

From what I've found on the subject, Firefox doesn't like invalid HTML; 根据我在该主题上发现的内容，Firefox不喜欢无效的HTML；它不支持HTML。 however, from what I can tell, the HTML output is perfectly valid. 但是，据我所知，HTML输出是完全有效的。 More over, since it works on jsfiddle, I assume the issue has to be with the way Caja is interacting with my HTML and Firefox. 而且，由于它可以在jsfiddle上运行，因此我认为问题必须出在Caja与我的HTML和Firefox交互的方式上。

Also, one last thing, if I inspect the form element in Firefox and double click on the form tag in the markup panel, then click off (cancel editing), Firefox then detects all of the elements and everything works fine. 另外，最后一件事，如果我检查Firefox中的表单元素并双击标记面板中的表单标签，然后单击关闭（取消编辑），则Firefox将检测到所有元素，并且一切正常。 What Firefox displays as the HTML doesn't change though. Firefox显示为HTML的内容不变。

Thank you in advanced for your help. 在此先感谢您的帮助。

Answer 1

Congratulations, you found a bug; 恭喜，您发现了一个错误； a form's .elements never updates after the first time it is accessed. 表单的.elements在第一次访问后就不会更新。 I have fixed it in Caja r5321 . 我已经在Caja r5321中修复了它。

Google Caja appendChild无法在Firefox中更新form.elements

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-03-14 19:13:13

Google Caja appendChild无法在Firefox中更新form.elements

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-03-14 19:13:13

解决方案1
1 已采纳 2013-03-14 19:13:13