javascript如何动态加载js或者css文件

javascript如何动态加载js或者css文件:
大家都知道,如果js或者css代码比较多的话,最好把代码单独放入一个文件,然后引入引入即可,有时候可能根据实际需要都动态的加载这些文件,本章节就简单的介绍一下如何实现此功能。

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 ) 
  } 
}

 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8171

更多内容可以参阅 :http://www.softwhy.com/javascript/

猜你喜欢

转载自softwhy.iteye.com/blog/2265761