javascript如何動態載入js或者css檔案

大家都知道，如果js或者css程式碼比較多的話，最好把程式碼單獨放入一個檔案，然後引入引入即可，有時候可能根據實際需要都動態的載入這些檔案，本章節就簡單的介紹一下如何實現此功能。

[JavaScript] 純文字檢視 複製程式碼
var flag=true; 
if(flag){ 
  loadScript("js/index.js"); 
}; 
function loadScript(url){ 
  var script=document.createElement("script"); 
  script.type="type/javascipt"; 
  script.src=url; 
  document.getElementsByTagName("head")[0].appendChild(script); 
}; 
// 動態載入js 
if(flag){ 
  var script=document.createElement("script"); 
  script.type="text/javascript"; 
  script.text=" "; 
  document.getElementsByTagName("head")[0].appendChild(script); 
}; 
// 動態載入外部css樣式 
if( flag ){ 
  loadCss( "css/base.css" ); 
}; 
function loadCss(url){ 
  var link=document.createElement("link"); 
  link.type="text/css"; 
  link.rel="stylesheet"; 
  link.href=url; 
  document.getElementsByTagName("head")[0].appendChild(link); 
}; 
// 動態載入css樣式 
if(flag){ 
  var style=document.createElement("style"); 
  style.type ="text/css"; 
  document.getElementsByTagName("head")[0].appendChild(style); 
  var sheet = document.styleSheets[0]; 
  insertRules(sheet,"#gaga1","background:#f00",0); 
}; 
function insertRules(sheet,selectorTxt,cssTxt,position){ 
  if(sheet.insertRule){ // 判斷非IE瀏覽器 
    sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position ); 
  }
  else if( sheet.addRule ){ //判斷是否是IE瀏覽器 
    sheet.addRule( selectorTxt ,cssTxt ,position ) 
  } 
}

以上程式碼原理非常的簡單，就是通過document.createElement()函式建立相應的元素，然後設定屬性，最後通過appendChild()函式在head標籤內新增此元素即可。