admin 发表于 2015-9-21 22:40:27

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);

admin 发表于 2020-3-30 08:16:08

$.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 发表于 2022-11-4 14:52:03

优解方案,支持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]
查看完整版本: js加载外链文件的脚本