多瀏覽器兼容的動態加載 JavaScript 與 CSS第1/2頁
2024-05-06 14:17:19
供稿：網友
在介紹ensure內部的實現之前，讓我們先來看看其功能：
ensure({
html: "popup.html",
javascript: "popup.js",
css: "popup.css"
}, function() {
Popup.show("hello world");
}
);
在這段代碼中，ensure首先會確保popup.html、popup.js、popup.css這3個文件的加載，如果都沒加載過ensure就會動態加載它們；如果已經加載過了，ensure不會再次加載。在確保這3個文件都加載后，ensure會調用后面的匿名函數，也就是執行Popup.show("hello world");。
接下來，就讓我們看看ensure是如何動態加載JavaScript與CSS的。
加載JavaScript
在ensure當中，加載JavaScript分兩種情況來執行，也就是Safari與非Safari這兩種情況。
在IE、Firefox、Opera中加載JavaScript
在這三款瀏覽器中加載JavaScript，其實只需要創建一個script元素，把src指向要加載的URL，最后把script元素追加到head元素上，那就搞掂了。此項工作是在HttpLibrary.createScriptTag()中完成的。不過我們不僅僅要加載JavaScript，同時還需要知道它什么時候完成加載，這可以通過script元素的onload事件或onreadystatechange事件來實現。
在Safari中加載JavaScript
因為Safari 2不支持onload或者onreadystatechange，所以只能手動通過XHR把URL讀去過來，然后再手動eval這段代碼，這就帶來了一個限制──只能加載本域的JavaScript文件。在ensure當中，eval的工作是通過HttpLibrary.globalEval()來完成的。為了讓JavaScript代碼在全局（global）上下文中eval，ensure還是使用了創建script元素的方法，并將要eval的JavaScript置于其內，最后把script元素追加到head元素內。
細心的人肯定要問，為什么HttpLibrary.globalEval()要如此設計，而非直接window.eval或者eval.call。這是因為，window.eval和eval.call都無法在IE6中實現和script標簽加載JavaScript代碼一模一樣的效果，這兩種做法的eval在IE6下仍然不是在全局上下文中執行的。搜索一下你就會發現一些相關的討論，例如jQuery就曾經使用window.execScript()來完成此項任務。不過最終大家都發現添加script元素才是最好的跨瀏覽器解決方案，所以現在的jQuery和ensure都是如此實現的了。
加載CSS
相對于加載JavaScript而言，加載CSS就簡單多了，而且方法也是類似的：在head元素內直接加入link元素就可以了。這也正是loadCSS()所完成的工作。
實際上，ensure沒有確保CSS完成加載后再執行下去。這估計是因為瀏覽器都能夠在CSS加載完成后自動應用到頁面上，因此Omar AL Zabir就認為CSS的加載順序是無關緊要的，不過假如CSS加載速度實在太慢，其實還是會影響顯示效果的。
在IE6中加載CSS
這次需要特別照顧的是IE6，而非Safari。IE6在往head元素添加link元素時，必須在window的上下文中完成，因此添加link的函數通過call調用切換了上下文。
