javascript基础：动态加载脚本和样式

一、动态加载js代码或脚本

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

比如:我们想在需要检测浏览器的时候,再引入检测文件。

方法一：通过内联的方式动态加载js代码

var flag = true;//设置一个是否加载js脚本的标记,当需要加载的时候设置为true；if(flag){    //加载js的代码    var text = document.createTextNode("alert('lee')");    var script = document.createElement('script');    script.type = 'text/javascript';    script.appendChild(text);//IE是不支持script元素的append child方法的    var head = document.getElementsByTagName('head')[0];    head.appendChild(script);}

PS:IE浏览器认为script是特殊元素,不能在访问子节点。为了兼容,可以使用text属性来代替。

script.text = "alert('')"; //IE 可以支持了。

 

方法二：通过连接的方式动态加载js脚本

var flag = true;//设置一个是否加载js脚本的标记，当需要加载的时候设置为true；if(flag){    loadScript('xxx.js');}//加载js脚本的方法function loadScript(jsUrl){    //加载js脚本    var script = document.createElement('script');    script.type = 'text/javascript';    script.src = jsUrl;    var head = document.getElementsByTagName('head')[0];    head.appendChild(script);}

二、动态样式

为了动态的加载样式表 ,比如切换网站皮肤 。样式表有两种方式进行加载 ,一种是<link>标签,一种是<style>标签。 

方法一：通过内联的方式动态加载style代码

var flag = true;if (flag) {    var style = document.createElement('style');    style.type = 'text/css';    //var box= document.createTextNode(#box{background:red}'); //IE 不支持    //style.appendChild(box);document.getElementsByTagName('head')[0].appendChild(style);    insertRule(document.styleSheets[0], '#box', 'background:red', 0);}function insertRule(sheet, selectorText, cssText, position) {//如果是非 IE    if (sheet.insertRule) {        sheet.insertRule(selectorText + "{" + cssText + "}", position);    }//如果是 IE     else if (sheet.addRule) {        sheet.addRule(selectorText, cssText, position);    }} 

方法二：通过连接的方式动态加载css脚本

var flag = true;if (flag) {     loadStyles('basic.css');} function loadStyles(url) {    var link = document.createElement('link');    link.rel = 'stylesheet';    link.type = 'text/css';    link.href = url;    document.getElementsByTagName('head')[0].appendChild(link);}