在javascript中调用javascript适用于某些脚本，但不是所有脚本

Question

在我的html文件中调用的script.js文件中有以下代码:

function loadScript(url)
{    
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
head.appendChild(script);
}
loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6')
loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js')
loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js')
hljs.initHighlightingOnLoad();

我使用这段代码是因为我想在我的html中只调用一个。js文件，而不是多个。js文件。

我加载来调用MathJax的前两个脚本运行良好。第三个调用highlight.js的脚本却没有运行。

当我将'highlight.min.js'文件中的所有代码粘贴到我的script.js文件中时，当我打开html时，javascript确实正常运行。

我不明白为什么用loadScript()加载'highlight.min.js'文件不起作用，或者我能做些什么来让它工作。如有任何帮助，不胜感激。

Answer 1

脚本加载是异步的，所以当hljs.initHighlightingOnLoad()被调用时，脚本还没有加载。

替代1

你可以修改你的loadScript()函数，使它与承诺一起工作，当脚本被加载时(从这里取的):

function loadScript(url) {    
return new Promise(function(resolve, reject) {
var script = document.createElement("script");
script.onload = resolve;
script.onerror = reject;
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
});
}

现在你可以调用你的代码，并确保在调用hljs.initHighlightingOnLoad()之前加载所有库:

(async function init() {
await loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6');
await loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js')
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js')

hljs.initHighlightingOnLoad();
})()

替代2

您可以修改您的loadScript()函数，使其使用defer加载脚本，并添加一个可选的onload处理程序，您可以使用它来调用hljs.initHighlightingOnLoad():

function loadScript(url, onload)
{    
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
script.onload = onload;
head.appendChild(script);
}
loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6')
loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js')
loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js', () => {hljs.initHighlightingOnLoad()})

Answer 2

你的onload处理程序在哪里?

script.onload = function(){};

让我们暂时不要担心错误…

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

如果库相互需要，则需要推迟，因为子库可能比父库小。