页面加载后在 html 正文中注入外部 javascript 文件答案

【问题标题】：Inject external javascript file in html body after page load页面加载后在 html 正文中注入外部 javascript 文件
【发布时间】：2023-03-02 22:47:01
【问题描述】：

我想在页面加载后加载外部 javascript。实际上，javascript 包含广告的来源，并且它使页面加载缓慢。我想要的只是延迟广告的加载和执行，以确保快速加载页面。

谢谢，比拉尔

【问题讨论】：

您是否尝试将<script> 放在文档末尾，就在</body> 之前？

标签： javascript jquery model-view-controller delayed-execution

【解决方案1】：

您可以在正文块的最后一个标签处使用此脚本：

<script type="text/javascript">
   var script = document.createElement('script');
   script.setAttribute('src', 'http://yourdomian.com/your_script.js');
   script.setAttribute('type', 'text/javascript');
   document.getElementsByTagName('head')[0].appendChild(script);
</script>

【讨论】：

这不会显示由外部脚本加载的广告。
最后一行的改进：document.head.appendChild(script)

【解决方案2】：

var script=document.createElement('script');
script.type='text/javascript';
script.src=url;

$("body").append(script);

Courtsey

【讨论】：

此时不需要使用jQuery。 document.body.appendChild(script);
这不会显示由外部脚本加载的广告。
脚本不会立即可用（使用 jQuery 和非 jQuery 方法），因此这不是一个通用的解决方案。你要么需要使用像 async 这样的库，要么使用带有 promise 的 jQuery getScript 方法（见下文）。

【解决方案3】：

$("#selector").click(function(){ $.getScript("YourScript.js"); });

然后运行该脚本中实现的内容

【讨论】：

同上，加载异步所以要稳定，你必须使用同步库或承诺，例如： $.getScript( url ).then( function() { //不会在脚本实际加载之前调用 });

【解决方案4】：

我会考虑使用异步 Javascript 加载。有这样的框架，例如requireJS。

【讨论】：

【解决方案5】：

如果不使用 jQuery getScript() 和 Promise 或适当的加载库（如 requireJS），脚本可以包含在页面中，但会异步加载，因此无法保证它会在您需要时准备好。如果您已经在使用 jQuery，那么简单的答案是：

$.getScript( scriptUrl ).then( function() {
  //do this ONLY after the script is fully loaded
});

【讨论】：