首页 > 代码库 > 第一百一十八节，JavaScript，动态加载脚本和样式

第一百一十八节，JavaScript，动态加载脚本和样式

2024-08-24 05:56:07   211人阅读

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 =http://www.mamicode.com/ 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，动态加载脚本和样式


联系
我们