等待动态加载的脚本

Question

在我的页面正文中，我需要插入此代码作为 AJAX 调用的结果：

     <p>Loading jQuery</p>
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script>
    <p>Using jQuery</p>
    <script type='text/javascript'>
        $.ajax({
            ...
        });
    </script>

我不能使用 $.load() 因为文档已经加载，所以事件不会触发。

这样安全吗？如果没有，我如何确保在执行自定义生成的代码之前已加载 jquery 脚本。

原文由 Aaron Digulla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这很安全。从历史上看， <script> 标签是完全阻塞的，因此第二个 <script> 标签在前者完成解析/执行之前无法遇到。唯一的问题可能是“现代”浏览器倾向于异步和延迟加载脚本。因此，为确保顺序正确，请像这样使用它：

 <p>Loading jQuery</p>
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script>
<p>Using jQuery</p>
<script type='text/javascript'>
    $.ajax({
        ...
    });
</script>

但是，使用动态脚本标记插入而不是将其作为 HTML 字符串推送到 DOM 中可能是一个更好的主意。会是同一个故事

var scr  = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0];
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);

原文由 jAndy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 ID 添加到您的脚本文件，以便您可以查询它。

 <script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

然后在 JavaScript 中为其添加一个负载监听器

<script>
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad();
  });
</script>

原文由 Rob Fox 发布，翻译遵循 CC BY-SA 3.0 许可协议