javascript动态加载js或者css文件

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

[ 其他 ] 运行代码下载代码

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

代码描述：javascript 动态加载 jscss文件。javascript动态加载js或者css文件

下载全部收藏

168 223

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册