我在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;
语句,而不用像我之前那样单击调试器-因此在实践中这可能并不是真正的问题。