Javascript - innerHTML 注意事項

　Javascript 中 -{innerHTML}- 非常好用，可以動態恣意地改變網頁內容，但在某些情形下，會產生一些副作用，而且大部份系統不會告知任何錯誤，使用上一定要小心。老頭在 Google 的 Blogger 製作部落格時，就曾遇過因 Javascript 競速，造成『追蹤者』小工具的內容，時有時無之現象；在 IE 下更發生事件（Event）失效，及頁面無法顯示的致命錯誤！這些親身經歷，花了不少時間才逐一澄清。

　測試了幾個知名瀏覽器對 -{innerHTML}- 的處理方式，歸納出最安全的作法就是：等待頁面文件（Document）完全處理完畢後，再進行任何與 -{innerHTML}- 相關的動作。要達成此目的，可以透過 -{document.readyState}- 這個屬性值來得知目前文件的處理狀態。以下參考函式可以在任何時間被呼叫，但主要程序並不會被執行，直到網頁內容被處理完畢為止，如此便可避免前述的種種問題。

[[　function post_init()
　{
　　var ready=#{document.readyState}#; /* 讀取內文處理狀態 */
　　if(!/#{loaded}#|#{complete}#/i.test(ready)) { /* 判斷狀態是否為 loaded 或 complete */
　　　setTimeout("post_init()",50); /* 若未完成，50毫秒後再嘗試 */
　　　return;
　　}
　　/* #{innerHTML 相關程序}# (初始化後段) */
　}]]

　只要能夠取得 Javascript 的物件（Object），那麼 -{innerHTML}- 幾乎是無所不能。舉例來說，-(var #{body}#=getElementsByTagName(#{"body"}#)[0];)- 可取得網頁主要內容的物件，透過 -{body.innerHTML}- 想改什麼就改什麼！但這並非萬靈藥，Javascript 區塊可能會因被覆蓋而變得不正常！-{除非必要，別去碰觸包含 javascript 區塊的部份}-。