第一百一十八節，JavaScript，動態加載腳本和樣式

時間 2019-11-12

標籤第一百一十八 javascript 動態加載腳本樣式欄目 JavaScript 简体版

原文原文鏈接

JavaScript，動態加載腳本和樣式javascript

一動態腳本css

當網站需求變大，腳本的需求也逐步變大。咱們就不得不引入太多的JS腳本而下降了整站的性能，因此就出現了動態腳本的概念，在適時的時候加載相應的腳本。html

好比：咱們想在須要檢測瀏覽器的時候，再引入檢測文件。java

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代碼app

//注意：判斷加載寫在，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文件url

//動態執行link，加載css文件
var flag = true;   //設置一個變量，值爲true加載文件，false不加載

//判斷執行函數
if (flag) {
    loadStyles('1.css');  //執行加載文件函數
}

function loadStyles(url) {  //接收一個參數，css文件路徑名稱
    //建立link標籤元素
    var link = document.createElement('link');
    //添加link標籤屬性
    link.rel = 'stylesheet';
    //添加link標籤屬性
    link.type = 'text/css';
    //添加link標籤屬性
    link.href = url;
    //將新建立的link標籤，添加到第一個head標籤的子元素末尾
    document.getElementsByTagName('head')[0].appendChild(link);
}

2動態加載css代碼

//動態加載css代碼
var flag = true;  //設置一個變量，值爲true加載樣式代碼，值爲false不加載

if (flag) {  //判斷flag爲真執行裏面代碼
    //建立一個style元素標籤
    var style = document.createElement('style');
    //添加style元素屬性
    style.type = 'text/css';
    //獲取到第一個head標籤，將新建立的style元素標籤添加到head標籤的子元素末尾
    document.getElementsByTagName('head')[0].appendChild(style);
    //執行樣式函數
    insertRule(document.styleSheets[0], '#box', 'background:red', 0);
}

function insertRule(sheet, selectorText, cssText, position) {  //執行函數，接收4個參數，參數1css樣式對象，參數2選擇器名稱，參數3樣式代碼，參數4要添加的位置
        //若是是非IE
    if (sheet.insertRule) { //判斷若是爲真
        //經過insertRule方法向樣式表對象添加一個選擇器
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
        //若是是IE
    } else if (sheet.addRule) { //判斷若是爲真
        //經過addRule方法向樣式表對象添加一個選擇器
        sheet.addRule(selectorText, cssText, position);
    }
}