Javascript document.getElementById（「side_bar」）。innerHTML mktree適用於Firefox，但不適用於Chrome或IE。

Question

我有一個開發中的Google Maps應用程序https://sites.google.com/site/collectinginterests/somerset-post-offices。側欄是動態構建的，並使用mktree（來自http://www.javascripttoolbox.com/lib/mktree/）摺疊視圖。

頁面在Firefox中顯示OK（即摺疊側欄），但不顯示Chrome或IE中全部顯示無序列表（無[+]按鈕）的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> 

然而，更多的調試後：我試着走動的處理，使創建和調用谷歌地圖前重寫側邊欄創建地圖並繪製標記，但仍無法正確格式化邊欄。

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處理程序，而是在正確的時間直接從代碼中調用該函數。例如，您可以在Create_Sidebar()呼叫之後立即致電convertTrees()在Load_Arrays()的末尾。

順便說一句，如果你能擺脫這個Google Gadget監獄並在一個普通的非Gadget HTML頁面中測試你的代碼，它將使它更容易調試代碼。使用像Firebug或Chrome DevTools這樣的普通開發人員工具和小工具代碼很難，因爲他們通過加載您的實際代碼，其網址經常變化。當發生這種情況時，您將失去在舊URL中設置的任何斷點。

當然，如果你自己編輯代碼，你可以使用一個debugger;語句，在你想要一個斷點而不是像我在做的那樣在調試器中單擊 - 因此在實踐中這可能不是真正的問題。