第一百一十八节，JavaScript，动态加载脚本和样式
JavaScript，动态加载脚本和样式
一动态脚本
当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的JS脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
比如：我们想在需要检测浏览器的时候，再引入检测文件。
1动态加载js文件
window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
//判断要加载的文件是否加载成功
alert(typeof BrowserDetect);
};
//注意：判断加载写在，window.onload外面，也就是先加载代码，不然网页执行后在生成<script>元素标签就连接不了
//设置一个变量，值为true再加载，值为false不加载文件
var flag = true;
if (flag) { //判断flag值为真时，执行加载js文件函数
loadScript('browserdetect.js');
}
//定义加载js函数，接收一个参数要加载的js我们路径名称
function loadScript(url) {
//创建<script>元素标签
var script = document.createElement('script');
//向标签添加属性
script.type = 'text/javascript';
//向标签添加属性
script.src = url;
//向标签添加属性
script.charset = 'utf-8';
//通过标签名称获取到第一个<head>标签，将新创建<script>元素标签添加到<head>标签的子标签末尾
document.getElementsByTagName('head')[0].appendChild(script);
}
2多态加载js代码
//注意：判断加载写在，window.onload外面，也就是先加载代码，不然网页执行后在生成<script>元素标签就连接不了
//设置一个变量，值为true再加载，值为false不加载代码
var flag = true; if (flag) { //判断flag值为真时，执行加载js代码函数
loadScript(); //执行函数
} //定义加载js代码函数，
function loadScript() {
//创建一个script标签
var script = document.createElement('script');
//向标签添加属性
script.type = 'text/javascript';
//向标签添加属性
script.charset = 'utf-8';
//要执行的代码
script.text = "alert('你好')";
//将script标签添加到第一个head标签的子标签末尾
document.getElementsByTagName('head')[0].appendChild(script);
}
PS：当然，如果不支持text，那么就可以针对不同的浏览器特性来使用不同的方法。这里就忽略写法了。
二动态样式
为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。
1动态加载css文件
//动态执行link，加载css文件
var flag = true; //设置一个变量，值为true加载文件，false不加载 //判断执行函数
if (flag) {
loadStyles('1.css'); //执行加载文件函数
} function loadStyles(url) { //接收一个参数，css文件路径名称
//创建link标签元素
var link = document.createElement('link');
//添加link标签属性
link.rel = 'stylesheet';
//添加link标签属性
link.type = 'text/css';
//添加link标签属性
link.href = url;
//将新创建的link标签，添加到第一个head标签的子元素末尾
document.getElementsByTagName('head')[0].appendChild(link);
}
2动态加载css代码
//动态加载css代码
var flag = true; //设置一个变量，值为true加载样式代码，值为false不加载 if (flag) { //判断flag为真执行里面代码
//创建一个style元素标签
var style = document.createElement('style');
//添加style元素属性
style.type = 'text/css';
//获取到第一个head标签，将新创建的style元素标签添加到head标签的子元素末尾
document.getElementsByTagName('head')[0].appendChild(style);
//执行样式函数
insertRule(document.styleSheets[0], '#box', 'background:red', 0);
} function insertRule(sheet, selectorText, cssText, position) { //执行函数，接收4个参数，参数1css样式对象，参数2选择器名称，参数3样式代码，参数4要添加的位置
//如果是非IE
if (sheet.insertRule) { //判断如果为真
//通过insertRule方法向样式表对象添加一个选择器
sheet.insertRule(selectorText + "{" + cssText + "}", position);
//如果是IE
} else if (sheet.addRule) { //判断如果为真
//通过addRule方法向样式表对象添加一个选择器
sheet.addRule(selectorText, cssText, position);
}
}
第一百一十八节，JavaScript，动态加载脚本和样式的更多相关文章
- JavaScript的DOM_动态加载脚本和样式
一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- JavaScript动态加载资源
//动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- JS 动态加载脚本 执行回调
JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...
- js动态加载脚本
最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- jquery动态加载脚本
如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
随机推荐
- Bootstrap相关优质项目推荐
Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...
- Twitter算法
算法实践——Twitter算法面试题(积水问题)的线性时间解法 问题描述:在下图里我们有不同高度的挡板.这个图片由一个整数数组所代表,数组中每个数是墙的高度.下图可以表示为数组(2.5.1.2.3 ...
- 【又长见识了】函数传参，params参数，ref和out参数详解
一.原来函数这样传参 先看一个函数和函数调用. static void Main(string[] args) { ; Test(num);//局部变量在使用之前赋值 //Test(10); //直接 ...
- IceMx.Mvc 我的js MVC 框架六、完善植物大战僵尸（向日葵登场）
有图有真相,废话不多说上图 看到园友的支持很受鼓舞,更觉得应该做下去,虽然自己是个菜鸟,但也应该共享自己的心得,只要有人获益那就是值得的. 我的下载需要csdn论坛的1个积分,之所以不完全免费出去是因 ...
- 一,IL访问静态属性和字段
一,IL访问静态属性和字段 IL介绍 通用中间语言(Common Intermediate Language,简称CIL,发音为"sill"或"kill")是一 ...
- Linq 结果转成 json
public string BindGrid(string page,string rows) { int pageIndex = 0; if ...
- 跨站请求伪造（Cross Site Request Forgery (CSRF)）
跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Sit ...
- JDBC开发
1.JDBC简介 )数据库驱动 )Sun公司为简化数据库开发,定义了一套jdbc接口,这套接口由数据库厂商去实现,这样,开发人员只需要学习jdbc接口,并通过jdbc加载具体的驱动,就可以操作数据库. ...
- IOS开发笔记 - 基于SDWebImage的网络图片加载处理
前言: 在IOS下通过URL读一张网络图片并不像Asp.net那样可以直接把图片路径放到图片路径的位置就ok, 而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示. 这里找 ...
- 基于libgdx游戏引擎开发的飞天猫
闲来没事学学游戏,这是鄙人第一个小游戏——飞天猫 1,基于Android开发的小游戏,至少Android2.2以上的系统. 2,界面简洁,美观,游戏易操作,上手快. 3,可以左右摇摆手机来改变飞天猫的 ...