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);
}