0

我希望我的小工具有两种不同的视图：一种是刚刚添加时，让用户输入一些信息，另一种是根据该信息显示一些数据。

我可以决定我必须显示这两个视图中的哪一个的最早时间是当我第一次获得状态时，即在状态回调中。但是，当我在那里更改 UI 时，它并不总是显示 - 显然涉及一些时间问题。有时 UI 根本不显示，有时显示正常，有时显示在小工具加载动画前面。

这是一个简单的测试用例：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Trivial" height="120">
  <Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
    <script type="text/javascript">
      function createForm () {
        document.write("<div id=\"form\">");
        document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
        document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
        document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
        document.write("</div>");
      }
    </script>
    <script type="text/javascript">
    function stateUpdated () {
      createForm ();
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback (stateUpdated);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
    </script>
  ]]>
  </Content>
</Module>
4

1 回答 1

0 
<script type="text/javascript">
  function createForm () {
    document.write("<div id=\"form\">");
    document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
    document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
    document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
    document.write("</div>");
  }
</script>

As you can see in http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268 the document,

write: Write a string of text to a document stream opened by open(). Note that the function will produce a document which is not necessarily driven by a DTD and therefore might be produce an invalid result in the context of the document.

So It isn't cool to use such method. I recommend you to use a framework, such as jQuery, which can create and add elements in the DOM-friendly way. It will be a working method.

于 2009-10-29T03:37:50.727 回答