javascript - 在 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() 函数以使其与 promises 一起工作，promises 在加载脚本时解析 (taken from here):

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()})