js加载外链文件的脚本

admin

我们经常会遇到在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")[0].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);

admin

$.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"
        });
}

admin

var cache = {}
function loadScript(link) {
        if (cache[link]) return Promise.resolve()
        return new Promise((resolve, reject) => {
                function success() {
                        cache[link] = true;
                        resolve();
                }
                function fail() {
                        reject(link);
                }
                const script = document.createElement('script');
                script.src = link;
                script.onload = success;
                script.onerror = fail;
                document.getElementsByTagName('head')[0].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