第一百一十八节，JavaScript，动态加载脚本和样式
Posted 林贵秀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一百一十八节，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文件
以上是关于第一百一十八节，JavaScript，动态加载脚本和样式的主要内容，如果未能解决你的问题，请参考以下文章
python第一百一十八天---ajax--图片验证码 + Session
大数据必学Java基础（一百一十八）：什么是Maven和它的下载整合