在一些生成的静态html文件中药引入JS文件时，考虑到不用重新生成html静态，只要在当前页面引入的一个js文件中加入动态加载js、css的代码即可。
引入js、css文件，无回调函数
//方法没有回调，通过传入的文件扩展名来判断加载css和js
function loadSource(arr){
var i = 0,len = arr.length,fragment = document.createDocumentFragment();
for(;i<len;i++){
var ext = arr[i].match(/\.[^\.]+$/)[0];
switch(ext){
case ".css":
var link;
if(typeof link=='undefined'){
link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
}
link.href = arr[i];
fragment.appendChild(link);
break;
default:
var script;
if(typeof script=="undefined"){
script = document.createElement("script");
script.type = "text/javascript";
}
script.src = arr[i];
fragment.appendChild(script);
break;
}
}
document.getElementsByTagName("head")[0].appendChild(fragment);
}
function loadSource(arr){
var i = 0,len = arr.length,fragment = document.createDocumentFragment();
for(;i<len;i++){
var ext = arr[i].match(/\.[^\.]+$/)[0];
switch(ext){
case ".css":
var link;
if(typeof link=='undefined'){
link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
}
link.href = arr[i];
fragment.appendChild(link);
break;
default:
var script;
if(typeof script=="undefined"){
script = document.createElement("script");
script.type = "text/javascript";
}
script.src = arr[i];
fragment.appendChild(script);
break;
}
}
document.getElementsByTagName("head")[0].appendChild(fragment);
}
食用方式 loadSource('https://www.baidu.com/script.js','https://www.baidu.com/style.css')
引入js并有回调函数，引入成功后执行回调函数
这种方法最常用的就是导入jQuery并执行jQuery相关代码。
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback()
}
}
} else {
script.onload = function() {
callback()
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script)
}
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback()
}
}
} else {
script.onload = function() {
callback()
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script)
}
食用方式
loadScript('/sources/js/jquery.min.js',function(){
jQuery(document).ready(function($) {
//the lollipop by yefengs
//这里是jQuery 代码
});
});
jQuery(document).ready(function($) {
//the lollipop by yefengs
//这里是jQuery 代码
});
});
如果这段代码在末尾添加?t=随机数，那么这个文件就不会被缓存了，每次页面都是重新加载的，对于那种整站添加样式或者脚本的食用场景是非常不错的。