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 標(biāo)簽里面。經(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和css

開發(fā)過程中經(jīng)常需要動態(tài)加載js和css，今天特意總結(jié)了一下常用的方法。

1、動態(tài)加載js

方法一：動態(tài)加載js文件

// 動態(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)加載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();

2、動態(tài)加載css

方法一：動態(tài)加載css文件

// 動態(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");

方法二：動態(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);

以上就是告訴大家如何實現(xiàn)JavaScript動態(tài)加載CSS和JS文件，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: