我正在尝试动态加载 JS 脚本，但不能使用 jQuery。
我检查了 jQuery 源代码以了解 getScript 是如何实现的，以便我可以使用该方法使用原生 JS 加载脚本。但是，getScript 只调用 jQuery.get()
我一直无法找到 get 方法的实现位置。
所以我的问题是，
使用原生 JavaScript 实现我自己的 getScript 方法的可靠方法是什么？
谢谢！
【问题讨论】：
标签： javascript jquery getscript
这是一个带有回调功能的 jQuery getScript 替代方案：
function getScript(source, callback) {
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')[0];
script.async = 1;
script.onload = script.onreadystatechange = function( _, isAbort ) {
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort && callback) setTimeout(callback, 0);
}
};
script.src = source;
prior.parentNode.insertBefore(script, prior);
}
【讨论】：
if (!isAbort && callback) setTimeout(callback, 0)。
你可以像这样获取脚本：
(function(document, tag) {
var scriptTag = document.createElement(tag), // create a script tag
firstScriptTag = document.getElementsByTagName(tag)[0]; // find the first script tag in the document
scriptTag.src = 'your-script.js'; // set the source of the script to your script
firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag); // append the script to the DOM
}(document, 'script'));
【讨论】：
insertBefore() 将其附加到DOM。你在哪里看到$.get？
使用这个
var js_script = document.createElement('script');
js_script.type = "text/javascript";
js_script.src = "http://www.example.com/script.js";
js_script.async = true;
document.getElementsByTagName('head')[0].appendChild(js_script);
【讨论】：
var 的情况下声明一个变量，不必要地设置type 并附加到head 会激怒某人以至于失去一些代表在它上面。
首先，感谢@Mahn 的回答。我在 ES6 中重写了他的解决方案并承诺，如果有人需要，我将把我的代码粘贴到这里：
const loadScript = (source, beforeEl, async = true, defer = true) => {
return new Promise((resolve, reject) => {
let script = document.createElement('script');
const prior = beforeEl || document.getElementsByTagName('script')[0];
script.async = async;
script.defer = defer;
function onloadHander(_, isAbort) {
if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = null;
script.onreadystatechange = null;
script = undefined;
if (isAbort) { reject(); } else { resolve(); }
}
}
script.onload = onloadHander;
script.onreadystatechange = onloadHander;
script.src = source;
prior.parentNode.insertBefore(script, prior);
});
}
用法：
const scriptUrl = 'https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit';
loadScript(scriptUrl).then(() => {
console.log('script loaded');
}, () => {
console.log('fail to load script');
});
并且代码是 eslinted。
【讨论】：
console.log('script loaded') 运行时，该 HTML 仍未加载。它需要setTimeOut(func, 0)。
source 的内容，并在数组中跟踪它们产生的承诺，这样任何尝试偶然加载相同源脚本的 JS , 将获得浏览器已经在处理（或可能已经完成加载）的相同承诺。
script.async = 'async'; 或 script.async = 1;
这完善了之前的 ES6 解决方案，适用于所有现代浏览器
const getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
getScript('https://dummyjs.com/js')
.then(() => {
console.log('Loaded', dummy.text())
})
.catch(() => {
console.error('Could not load script')
})
也适用于 JSONP 端点
const callbackName = `_${Date.now()}`
getScript('http://example.com/jsonp?callback=' + callbackName)
.then(() => {
const data = window[callbackName];
console.log('Loaded', data)
})
另外，请注意列出的一些 AJAX 解决方案，因为它们与现代浏览器中的 CORS 策略绑定在一起 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
【讨论】：
async/await 语法
这里有一些很好的解决方案，但很多都已经过时了。 @Mahn 有一个 good one，但正如评论中所述，它不能完全替代 $.getScript()，因为回调不接收数据。我已经编写了自己的函数来替换$.get()，并在我需要它为脚本工作时来到这里。我能够使用@Mahn 的解决方案并对其进行一些修改以及我当前的$.get() 替换，并提出一些运行良好且易于实现的东西。
function pullScript(url, callback){
pull(url, function loadReturn(data, status, xhr){
//If call returned with a good status
if(status == 200){
var script = document.createElement('script');
//Instead of setting .src set .innerHTML
script.innerHTML = data;
document.querySelector('head').appendChild(script);
}
if(typeof callback != 'undefined'){
//If callback was given skip an execution frame and run callback passing relevant arguments
setTimeout(function runCallback(){callback(data, status, xhr)}, 0);
}
});
}
function pull(url, callback, method = 'GET', async = true) {
//Make sure we have a good method to run
method = method.toUpperCase();
if(!(method === 'GET' || method === 'POST' || method === 'HEAD')){
throw new Error('method must either be GET, POST, or HEAD');
}
//Setup our request
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
//Once the request has completed fire the callback with relevant arguments
//you should handle in your callback if it was successful or not
callback(xhr.responseText, xhr.status, xhr);
}
};
//Open and send request
xhr.open(method, url, async);
xhr.send();
}
现在我们有了一个替代 $.get() 和 $.getScript() 的替代品，它们的工作原理同样简单：
pullScript(file1, function(data, status, xhr){
console.log(data);
console.log(status);
console.log(xhr);
});
pullScript(file2);
pull(file3, function loadReturn(data, status){
if(status == 200){
document.querySelector('#content').innerHTML = data;
}
}
【讨论】：
Mozilla Developer Network provides an example 异步工作，不使用 HTMLScriptTag 中不存在的“onreadystatechange”（来自@ShaneX 的回答）：
function loadError(oError) {
throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}
function prefixScript(url, onloadFunction) {
var newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) { newScript.onload = onloadFunction; }
document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
newScript.src = url;
}
示例用法：
prefixScript("myScript1.js");
prefixScript("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });
但是应该考虑@Agamemnus 的评论：调用onloadFunction 时脚本可能没有完全加载。可以使用计时器setTimeout(func, 0) 让事件循环完成添加到文档的脚本。事件循环最终调用了计时器后面的函数，此时脚本应该可以使用了。
然而，也许应该考虑返回一个 Promise 而不是提供两个函数来处理异常和成功，这将是 ES6 的方式。这也会导致不需要计时器，因为 Promise 由事件循环处理 - 因为在处理 Promise 时，脚本已经由事件循环完成。
实现Mozilla的方法包括Promises，最终代码如下：
function loadScript(url)
{
return new Promise(function(resolve, reject)
{
let newScript = document.createElement("script");
newScript.onerror = reject;
newScript.onload = resolve;
document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
newScript.src = url;
});
}
loadScript("test.js").then(() => { FunctionFromExportedScript(); }).catch(() => { console.log("rejected!"); });
【讨论】：
window.addEventListener('DOMContentLoaded',
function() {
var head = document.getElementsByTagName('HEAD')[0];
var script = document.createElement('script');
script.src = "/Content/index.js";
head.appendChild(script);
});【讨论】：