在页面加载后向HTML body中注入外部JavaScript文件

Question

我想在页面加载完成后加载外部JavaScript。实际上，这个JavaScript包含广告源，导致页面加载缓慢。我只想延迟广告的加载和执行，以确保页面快速加载。

谢谢， Bilal

- Tepu

---

你尝试过将 <script> 标签放在文档末尾，紧靠着 </body> 之前吗？ - Tomalak

Answer 1

你可以在body标签的最后添加以下脚本：

<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>

- Aleš Kotnik

---

这将不会显示由外部脚本加载的广告。 - Tepu

改进最后一行：document.head.appendChild(script) - Timo

Answer 2

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

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

Courtsey

- Ankur Verma

---

目前没有必要使用jQuery。document.body.appendChild(script); - Tomalak

这将不显示由外部脚本加载的广告。 - Tepu

脚本不会立即变得可用（使用jQuery和非jQuery方法），因此这不是一种通用解决方案。你需要使用像async这样的库，或者使用带有承诺的jQuery getScript方法（见下文）。 - rainabba

Answer 3

我建议使用异步的JavaScript加载方式。有一些框架可以用来实现，例如requireJS。

- Richard

Answer 4

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

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

- DadViegas

---

与上述相同，这是异步加载的，因此为了稳定性，您必须使用同步库或承诺，例如：$.getScript（url）。然后（function（）{ //直到脚本实际加载后才会调用}）; - rainabba

Answer 5

如果不使用像jQuery getScript()和promise这样的东西，或者像requireJS这样的适当加载库，脚本可以被包含在页面中，但是它将异步加载，因此不能保证在需要时已准备好。如果您已经在使用jQuery，则简单的答案是：

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

- rainabba