JQuery 載入 CSS、JS 檔案
阿新 • • 發佈:2019-02-11
JS 方式載入 CSS、JS 檔案:
//載入 css 檔案
functionincludeCss(filename) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = filename;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link)
}
//載入 js 檔案
functionincludeJs (filename) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
上面這種方式很簡單,但也會出現一些問題,比如載入 JS 檔案之後,需要執行 JS 內的方法,這時候偶爾會找不到方法執行,因為可能載入 JS 檔案的時候,網路卡掉了,所以,需要換種方式載入,必須在載入 JS 檔案完成之後,執行 JS 內部方法。
JQuery 載入 CSS 檔案:
$("head").append("<link>");
var css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "address_of_your_css"
});
Jquery 載入 JS 檔案,有兩種方式:
$.ajax({
url: "js file",
dataType: "script",
cache: true,
success: function () {
//todo
}
});
$.getScript('js file', function () {
//todo
});
上面兩種方式都可以,並且都是在載入 JS 檔案之後,再執行 JS 內部的方法(不會出現找不到方法執行錯誤),第二種會更簡單些。
那如果我們需要載入多個 JS 檔案呢?
$.when(
$.getScript( "/mypath/myscript1.js" ),
$.getScript( "/mypath/myscript2.js" ),
$.getScript( "/mypath/myscript3.js" ),
$.Deferred(function(deferred){
$(deferred.resolve);
})
).done(function(){
//place your code here, the scripts are all loaded
});
如果需要多次呼叫,也可以抽離出方法:
//定義
$.getMultiScripts = function(arr, path) {
var _arr = $.map(arr, function(scr) {
return $.getScript( (path||"") + scr );
});
_arr.push($.Deferred(function( deferred ){
$( deferred.resolve );
}));
return $.when.apply($, _arr);
}
//呼叫
var script_arr = [
'myscript1.js',
'myscript2.js',
'myscript3.js'
];
$.getMultiScripts(script_arr, '/mypath/').done(function() {
// all scripts loaded
});