动态加载js和css(外部文件)


Posted in Javascript onApril 17, 2013
// 动态加载外部js文件 
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 ) 
} 
}
Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
javascript html5实现表单验证
Mar 01 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 #Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 #Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 #Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 #Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 #Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php中目录,文件操作详谈
2007/03/19 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
原生js实现随机点名
2020/07/05 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python使用gensim计算文档相似性
2016/04/10 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
农业大学毕业生的个人自我评价
2013/10/11 职场文书
关于爱情的广播稿
2014/01/16 职场文书
爱护公共设施的标语
2014/06/24 职场文书
中职班主任培训心得体会
2016/01/07 职场文书