在 <head> 元素中动态加载脚本答案

【问题标题】：Load a script dynamically within the <head> element在 <head> 元素中动态加载脚本
【发布时间】：2020-01-14 18:50:33
【问题描述】：

好的，所以我正在尝试加载备份 .js 文件同步，以防脚本依赖项不可用，并且一切似乎都工作正常，除了所述脚本没有'实际上并没有加载，即使创建了带有src 的元素本身：

[etc]

<head>
<script id = 'self'>
 if (typeof jQuery === 'undefined') {

  function insertAfter(referenceNode, el) { 
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); 
  }

  var loadjq = document.createElement('script');

  // backup CDN
  loadjq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'; 

  loadjq.type = 'text/javascript';
  // loadjq.async = false;

  insertAfter(document.getElementById('self'), loadjq);

 }  
</script>

// element IS created here: <script src = 'https://ajax.google...' type = 'text/...'></script>
// but nothing is executed

<script>
  console.log($); // Reference Error
</script>
</head>

[etc]

请注意，我没有把它放在DOMContentLoaded 事件或任何东西中，但我觉得这应该可以工作。我用 Chrome 和 Firefox 测试过，这不是缓存错误。有什么建议吗？

【问题讨论】：

Load script async?的可能重复
Asynchronous Script Loading Callback的可能重复
该死的链接到错误的，但关键是这在 SO 上已经很好地涵盖了。
链接赞赏

标签： javascript synchronous dynamic-loading

【解决方案1】：

请注意，这并不理想，但是如果您绝对需要，可以使用以下内容。

使用document.write 同步实现。

<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>

<script>
document.write(`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>`);
</script>

<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>

请注意，您不能在字符串中直接包含</script>，因为这将终止实际的script 标记。

【讨论】：

但是，您可以像'<\/script>' 一样转义正斜杠，这样就不需要反引号了。谢谢，最佳答案。
我也修复了 sn-p。