在单击 jQuery / JavaScript 时附加和加载脚本答案

【问题标题】：Appending and loading a script on click jQuery / JavaScript在单击 jQuery / JavaScript 时附加和加载脚本
【发布时间】：2012-11-13 10:22:53
【问题描述】：

我目前正在处理一个网站，其中有一个脚本，只需要在单击某个元素时加载和显示。我们正在加载的脚本是外部的，加载速度非常慢，并且阻止了 dom 以尽可能快的速度加载。我希望在单击时附加此脚本或将其内容加载到某个元素中。我看了高低，并尝试了许多不同的方法来做到这一点，但没有成功。我知道这是可能的，并且以前做过，但不记得是怎么做到的。

请注意，我已尝试将 url 的内容加载到 iframe 中，然后克隆并添加到元素中。

下面的代码说明了我想要做什么

$("#button").click(function(e){
      e.preventDefault();
      var $slowLoadingScript = $('<script src="http://external-slow-script.com/script.js"></script>');      

    $slowLoadingScript.load(function(){
      $("#Element").append(slowLoadingScript);         
    });


  });

注意脚本的内容是这样的：

document.write("a long list of html and js");

【问题讨论】：

我认为你当然应该将此脚本附加到 head 部分，对吧？
@MikeSmithDev 脚本很大，它还调用外部脚本。它有 jquery UI、scrollTo 和一长串其他库/插件。
多少 KB？让它在第一次点击时加载一次然后被缓存不是一种选择？
@defau1t - 我不想附加到头部，我需要在上面列出的元素中。
@MikeSmithDev - 脚本是 250kb+ 很难说有 6-8 个外部文件被调用（css/js）。主要问题是脚本阻止了页面其余部分的加载。

标签： javascript jquery html ajax dom

【解决方案1】：

$('#button').click(function(e){
    e.preventDefault();
    $.getScript('http://external-slow-script.com/script.js');
});

jQuery 的 $.getScript() http://api.jquery.com/jQuery.getScript/ 的解释。

【讨论】：

我试过这个方法没有成功。调用 .done() 时，它不会给我这个脚本中的数据。
为什么你需要这些数据？ JavaScript 在加载后执行。
我需要这个脚本的内容来执行并且能够将它附加到某个元素。这不是一个库，它是一个我需要渲染的实际小部件。 $getScript 不能以我尝试过的方式工作。
您可以将document.write("a long list of html and js"); 替换为$('#id-of-element').append('a long list of html and js');。