項目中需要用到動態(tài)加載CSS 文件鳄抒，整理了一下冶匹，順便融合了動態(tài)加載JS 的功能寫成了一個對象撤防，先上代碼：
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
對象包含兩個完全獨立的方法虽风，分別用來加載CSS 文件和JS 文件，參數(shù)均為欲加載的文件路徑寄月。原理非常的簡單：對于不同的加載文件類型創(chuàng)建不同的節(jié)點辜膝，然后添加各自的屬性，最后扔到head 標簽里面漾肮。經(jīng)測試厂抖，本方法兼容各瀏覽器，安全克懊、無毒忱辅、環(huán)保，是 web 開發(fā)人員工作常備代碼谭溉。
下面是調(diào)用代碼墙懂，異常簡單：
//動態(tài)加載 CSS 文件
dynamicLoading.css("test.css");
//動態(tài)加載 JS 文件
dynamicLoading.js("test.js");
動態(tài)加載js
方法一：加載腳本
// 動態(tài)加載js腳本
function loadScriptString(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try{
// firefox、safari扮念、chrome和Opera
script.appendChild(document.createTextNode(code));
}catch(ex) {
// IE早期的瀏覽器 ,需要使用script的text屬性來指定javascript代碼损搬。
script.text = code;
}
document.body.appendChild(script);
}
// 測試
var text = "function test(){alert('test');}";
loadScriptString(text);
test();
方法二：加載文件
// 動態(tài)加載js腳本文件
function loadScript(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
// 測試
loadScript("javascript/lib/cookie.js");
動態(tài)加載css
方法一：加載腳本
// 動態(tài)加載css腳本
function loadStyleString(cssText) {
var style = document.createElement("style");
style.type = "text/css";
try{
// firefox、safari、chrome和Opera
style.appendChild(document.createTextNode(cssText));
}catch(ex) {
// IE早期的瀏覽器 ,需要使用style元素的stylesheet屬性的cssText屬性
style.styleSheet.cssText = cssText;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
// 測試
var css = "body{color:blue;}";
loadStyleString(css);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = "/css/indexIE.css";
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
方法二：加載文件
// 動態(tài)加載css文件
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
// 測試
loadStyles("css/secondindex.css");
