Question

我在https://sites.google.com/site/collectinginterests/somerset-post-offices开发了一个Google地图应用程序。侧栏是动态构建的，使用mktree（来自http://www.javascripttoolbox.com/lib/mktree/）来折叠视图。

页面在Firefox中显示OK（即折叠边栏），但在Chrome或IE中没有显示完整的无序列表（没有[+]按钮） - 至少对我而言。我注意到偶尔在Firefox中，侧栏没有正确格式化，但在重新加载页面时可以。在javascript控制台中没有发现任何错误。

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

我意识到我没有包含任何代码片段但是我不知道哪些位是相关的，特别是当侧栏html工作正常时。

稍后进行更多调试：我将侧边栏放在静态html中（使用与动态创建时完全相同的html）并且它适用于所有三种浏览器（即压缩）向下并显示[+]按钮。

所以我的问题似乎源于使用

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

它并没有被Chrome和IE（以及偶尔通过Firefox）完全处理，可能与填充谷歌地图所做的所有其他处理相关联。

重新加载此元素的网页是：

    <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地图创建地图并绘制标记之前创建并重写侧边栏，但仍然无法正确格式化侧边栏。

Answer 1

问题在于：您有两段代码并不总是以相同的顺序执行。

有一个getPlaces()函数通过小工具onload处理程序调用：

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等普通开发人员工具很难使用小工具代码，因为他们会通过其网址经常更改的<iframe>加载您的实际代码。当发生这种情况时，您将丢失在旧URL下设置的任何断点。

当然，如果你自己编辑代码，你可以使用debugger;语句，你想要一个断点而不是像我一样点击调试器 - 所以在实践中这可能不是真的问题

Javascript document.getElementById（“side_bar”）。innerHTML mktree适用于Firefox但不适用于Chrome或IE

1 个答案: