js加载外链文件的脚本
我们经常会遇到在Javascript脚本里嵌套js或css脚本,往往第一想到的是:document.write("....")
下面给出更多特定方法,加载特定文件,帮助您更好的理解js的更多高级用法。
加载css文件:
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'reveal.css';
document.getElementsByTagName("head").appendChild(link);
加载js文件:
var new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","reveal.js");
document.body.appendChild(new_element);
$.getScript("userthemes/gf/js/hondy.animate.js");
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
$.ajax({
url: url,
dataType: "script",
success: success
});
//同步加载仍有缺陷,原因不详
function createScript(src, charset) {
let script = document.createElement('script');
script.src = src;
script.charset = charset;
script.async = false;
document.body.appendChild(script);
};
var loadjs = function (url) {
$.ajax({
async: false,
url: url,
dataType: "script"
});
}
var loadjs = function (url, charset) {
$.ajax({
async: false,
url: url,
scriptCharset: charset,
dataType: "script"
});
}
优解方案,支持N个JS同步加载
var cache = {}function loadScript(link) {
if (cache) return Promise.resolve()
return new Promise((resolve, reject) => {
function success() {
cache = true;
resolve();
}
function fail() {
reject(link);
}
const script = document.createElement('script');
script.src = link;
script.onload = success;
script.onerror = fail;
document.getElementsByTagName('head').appendChild(script);
})
}
function asyncSeries(funs) {
return funs.reduce((promise, fun) => promise.then(fun), Promise.resolve());
}
function loadStaticSource(links) {
return new Promise((resolve, reject) => {
let p = asyncSeries(links.map((link) => () => loadScript(link)))
p.then(resolve)
.catch(reject);
})
}const links = ['../kindeditor/kindeditor.min.js', '../kindeditor/lang/zh_cn.js', '../kindeditor/plugins/code/prettify.js', 'js/hondy.form.min.js'];
loadStaticSource(links).then(() => {
console.log("All js load");
}, (link) => {
console.log("Error: " + link);
});
案例:Hondy.Site.Login.JS.ARTICLE_FUNCTION
页:
[1]