我在https://sites.google.com/site/collectinginterests/somerset-post-offices处有一个Google Maps应用程序正在开发中。侧边栏是动态构建的,并使用mktree(来自http://www.javascripttoolbox.com/lib/mktree/)折叠视图。

该页面在Firefox中显示为“确定”(即,折叠边栏),而在Chrome或IE中则显示为完整(无[+]按钮)-至少对我来说是如此。我注意到,有时在Firefox中,侧栏格式不正确,但是在重新加载页面时就可以了。在JavaScript控制台中未发现任何错误。

我已经捕获了动态创建的侧栏HTML,并将其放在测试页中,这在所有三个浏览器中均显示正常。

我意识到我还没有包含任何代码片段,但是我对哪些位是相关的感到迷惑,尤其是当侧边栏html可以独立运行时。

稍后进行更多调试:我将侧栏作为静态html(使用与动态创建时提取的html完全相同的html)放置,并且可以在所有三个浏览器上使用(即压缩并显示[+]按钮)。

所以我的问题似乎源于

document.getElementById("side_bar").innerHTML = side_bar;


而且Chrome和IE(有时甚至是Firefox)并没有对其进行全面处理,可能与为填充Google地图所做的所有其他处理相关联。

将该元素重新加载到的网页是:

    <table border=1>
      <tr>
      <td>
         <div id="map" style="width: 950px; height: 750px"></div>
      </td>
      <td width = 300 valign="top" style="color: #4444ff;">
         <div id="side_bar"  style="overflow:auto; height:750px;">
           *** static HTML inserted here and it works
         </div>
      </td>
      </tr>
    </table>


稍后再进行更多调试:我尝试移动处理过程,以便在调用Google Maps创建地图并绘制标记之前创建并重写边栏,但仍然无法正确格式化边栏。

最佳答案

问题出在这里:您有两段代码并不总是以相同的顺序执行。

有一个getPlaces()函数,通过小工具加载处理程序调用:

gadgets.util.registerOnLoadHandler(getPlaces);


此函数使用gotPlaces发出异步请求以进行回调:

gadgets.io.makeRequest(url, gotPlaces, params);


gotPlaces()调用Load_Arrays(),然后调用Create_Sidebar()

Create_Sidebar()是插入侧栏innerHTML的位置:

document.getElementById("side_bar").innerHTML = side_bar;


innerHTML在所有情况下都可以正常工作;这不是问题。

现在,您希望在此之后发生的事情是调用convertTrees()。此函数调用processList()在每个UL上设置类。

convertTrees()如何调用?从另一个onload处理程序-和另一种onload处理程序:

addEvent(window,"load",convertTrees);


但是如果您没有正确折叠列表,则在convertTrees()之前调用CreateSidebar()为时过早。

毫无疑问,这是不确定的。

如何解决?

我认为最简单的方法可能是删除convertTrees()的onload处理程序,而是在正确的时间直接从代码中调用此函数。例如,您可以在convertTrees()调用之后的Load_Arrays()末尾调用Create_Sidebar()

顺便说一句,如果您可以摆脱Google Gadget的束缚,并在普通的非Gadget HTML页面中测试您的代码,它将使调试代码变得更加容易。很难将Firebug或Chrome DevTools等普通开发人员工具与小工具代码一起使用,因为它们会通过URL经常更改的<iframe>加载您的实际代码。发生这种情况时,您会丢失在旧网址下设置的所有断点。

当然,如果您自己编辑代码,则可以在需要断点的地方使用debugger;语句,而不用像我之前那样单击调试器-因此在实践中这可能并不是真正的问题。

10-05 20:46
查看更多