星期六, 4月 24, 2010

動態載入 javascript, css 檔

要動態 load javascript, css 檔案有很多種方法。
假設今天是要載入 another.js 並執行當中的 anotherFunc(),可以使用以下方法。

在 head 區塊中,新增一個 script 標籤,並且指明當檔案載入完成就執行 load() 函式。如果要載入 css 檔案也是如法炮製。


或是不指明 onload 的動作,也就是不呼叫 load() 函式,改用以下方法檢查函式是否存在(也就是script檔案是否已經載入完成)。

但使用這個方法要注意若檔案沒有載入完成時,可能需要等待並且 re-try 。為了避免重複載入,可以在 document 中以變數儲存已經載入過得檔案(檔案名),並在 loadJs() 中檢查檔案是否已經被載入。

另外一個則是利用 Ajax 的作法,這個作法則沒有等待時序的問題。簡單的說就是動態發一個 XMLHttpRequest 得到某一段 javascript 程式碼,並執行之。


參考:
  1. http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
  2. http://heaven.branda.to/~thinker/GinGin_CGI.py/show_id_doc/128