Javascript动态加载脚本与样式

一动态加载js动态加载js的必要性：1. 项目越做越大，大量引入的js会导致性能问题；
2. 实际项目可能会遇到：需要在一个js文件中引用另一个js文件中的函数，可是另一个函数有没有办法在页面中通过该<script>标签加载。网上看了几篇博客大概有三种方式：

1、直接document.write

<script language="javascript">
document.write("<script src='jiaxiangjun.js'></script>");
</script>

2、动态改变已有script的src属性

<script src='' id="jxj"></script>
<script language="javascript">
jxj.src="jiaxiangjun.js"
</script>

3、动态创建script元素

<script>
var headTag = document.getElementsByTagName('HEAD').item(0);
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.src="jiaxiangjun.js";
headTag.appendChild(myScript);
</script>

基本的原理就是利用dom动态引入js到目的文件中。还有一种方法是提供了一个公用的插入script标签的方法，接受普通js代码作为参数，可以达到可以动态执行js的效果:

var myscript = document.createElement('script');
myscript.type = 'text/javascript';
var text =document.createTextNode("alert('jxj')");    // 设置script标签内容;IE会报错;
myscript.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(myscript);

// IE浏览器认为script是特殊元素,不能再访问子节点;
// 为了兼容,可以使用text属性来代替;
functionloadScriptString(code){
varscript = document.createElement("script");
script.type = "text/javascript";
try
{
// IE浏览器认为script是特殊元素,不能再访问子节点;报错;
script.appendChild(document.createTextNode(code));// W3C方式;
}
catch(ex)
{
script.text = code;//
}
document.body.appendChild(script);
}
// 调用;
loadScriptString("function sayHi(){alert('hi')}");

二 动态样式

为了一些项目提出的特殊的界面需要我们很多时候要实现几种皮肤风格的切换，比如我现在做的网管系统，平台两种风格，具体产品还有自己的风格；嘿嘿。为了实现着这些功能我们要实现动态加载样式。常见的样式有两种方式进行加载,一种是<link>标签,一种是<style>标签;1.动态引入link文件

var flag =true;
if(flag){
loadStyles('basic.css');// 调用公共函数,引入css路径;
}
functionloadStyles(url){
varlink = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}

2.动态执行style代码

var flag =true;
if(flag)
{
varstyle = docuemnt.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0],'#box','background:red',0);
}

functioninsertRule(sheet,selectorText,cssText,position)
{
if(sheet.insertRule) // 如果是非IE;
{
sheet.insertRule(selectorText+"{"+cssText+"}",position);

}
elseif(sheet.addRule) // 如果是IE;
{
sheet.addRule(selectorText,cssText,position);
}

动态执行style2
functionloadStyleString(css)
{
varstyle = document.createElement("style");
style.type = "text/css";
try
{
// IE会报错;不允许向<style>元素添加子节点;
style.appendChild(document.createTextNode(css));
}
catch(ex)
{
// 此时,访问元素的StyleSheet属性,该属性有有一个cssText属性,可以接受CSS代码;
style.styleSheet.cssText = css;
}
varhead = document.getElementsByTagName("head")[0];
head.appendChild(style);
}

loadStyleString("body {background-color:red}");

参考博客： http://www.cnblogs.com/yizihan/p/4386431.html?utm_source=tuicool
/article/5347798.html

http://www.iteye.com/topic/147810
http://www.cnblogs.com/feng_013/articles/1807520.html
本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1629392