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，动态加载脚本和样式的更多相关文章

  1. JavaScript的DOM_动态加载脚本和样式

    一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...

  2. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  3. JavaScript动态加载资源

    //动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...

  4. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  5. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  6. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  7. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  8. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  9. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

随机推荐

  1. IIS Express添加MIME映射

    最近在使用fontawesome字体时,在浏览器控制台看到 fontawesome-webfont.woff2?v=4.3.0 无法访问的错误,检查了一下文件确实存在并且路径也对,这就奇怪了! 在控制 ...

  2. 网络负载均衡环境下wsHttpBinding+Message Security+Windows Authentication的常见异常

    提高Windows Communication Foundation (WCF) 应用程序负载能力的方法之一就是通过把它们部署到负载均衡的服务器场中. 其中可以使用标准的负载均衡技术, Windows ...

  3. 生成GUID字符串

    //生成GUID字符串 string loginToken = System.Guid.NewGuid().ToString();

  4. GeoHash核心解析

    GeoHash核心解析 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐馆,并选了其中 ...

  5. Event处理

    Event处理 今天抽时间写了一部分Event处理方面的函数愈发的觉得jQuery的优秀,自己前期的想法太粗糙,造成后面这些函数参数很多,操作很很不直观,看样子是要重构的节奏,还好小伙儿伴们安慰,架构 ...

  6. web form中自定义HttpHandler仿mvc

    web form中自定义HttpHandler仿mvc 前言 在mvc大行其道的今天,仍然有不少公司的项目还是使用web form来实现的(其实mvc也是基于web form的),如果要在项目中引入m ...

  7. Spring实例

    Spring实例 上次的博文中 深入浅出Spring(二) IoC详解 和 深入浅出Spring(三) AOP详解中,我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们 ...

  8. .Net用户使用期限的设置、限制通用小组件

    .Net用户使用期限的设置.限制通用小组件 最近比较项目组的同事都比较烦,不断的穿梭在不同的项目之间,一个人同时要兼顾多个项目的维护修改.甚至刚放下这个客户的电话,另一个客户的电话就进来了.究其原因, ...

  9. MySQL的数据类型，MySQL增删改--添加主外键、添加属性、删除主外键、改表名、获取系统当前时间等

    ls /etc/rc.d/init.d/mysql56service mysql56 start ps aux |grep "mysql"|grep "socket=&q ...

  10. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...