使用 jQuery .load 剥离的脚本答案

【问题标题】：Scripts being stripped with jQuery .load使用 jQuery .load 剥离的脚本
【发布时间】：2012-01-22 22:00:53
【问题描述】：

我认为以前没有提出过这个问题，至少没有以我需要它回答的方式提出。我正在使用 jQuery 的 .load 函数。仅加载页面片段时出现问题。

当使用类似的东西时：

$('#content').load('loadTest.html');

loadTest.html 上的所有脚本都可以正常加载。但是，当加载这样的页面片段时：

$('#content').load('loadTest.html #content');

在更新 DOM 之前删除脚本

http://api.jquery.com/load/ 中明确记录了这一点：

注意： 当使用没有后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，这就是它们永远不会执行的原因。两种情况的示例如下所示：

我知道我可以从外部加载可以在任何地方使用的脚本，但问题是，我使用的是页面范围的 ajax 系统，其中所有内容都是动态加载的。所以我真的不想在外部文件中拥有我将编写的每一个javascript函数（此时为100个）。特别是因为其中一些 javascript 函数是由从数据库加载的值组成的，我无法在 .js 文件中说明。

在更新 DOM 之前删除脚本是否有任何解决方法？我可以以某种方式手动加载它们吗？任何小例子都会对我有所帮助。

【问题讨论】：

有什么好处？或者反过来：为什么不编写自己的加载函数来完全满足您的需求？
@hakre 由于整个站点都是 ajax 驱动的，所以我并不总是知道单击链接时需要加载哪些 javascript 函数。我只是不知道如何手动将脚本放回已剥离的 .load 中。

标签： php javascript jquery html load

【解决方案1】：

就像你说的。 jQuery 在仅执行该块之前提取该元素。

您可以修改输出以使服务器以您需要的格式返回数据，或者只编写您自己的格式。它会提取您需要的元素并将它们输出到 DOM。

未经测试，但它会沿着这条线......

$('#content').load('loadTest.html #content,script');

从记忆中这更有效..

$.get('loadTest.html',function(r){
    var els = $(r).find('#content,script');
    $('#content').html(els);
});

【讨论】：

【解决方案2】：

在您发表评论后，我想您可能会对js/css lazyload 之类的内容感兴趣。它有条件地加载脚本，当我在不同的子页面或用户交互中需要它们时，我在一些较小的网站上使用它来仅加载脚本和 CSS。

你在头部加载一次：

  <script src="js/lazyload-min.js" type="text/javascript"></script>

然后您可以在需要时动态加载脚本，这是众多示例之一：

// Load a single JavaScript file and execute a callback when it finishes.
LazyLoad.js('http://example.com/foo.js', function () {
  alert('foo.js has been loaded');
});

也适用于 CSS 文件。

这可能对您的情况有所帮助，但是，它也可能会改变您的加载逻辑。无论如何，我认为通常您的服务器上应该有多个 AJAX 端点，它们只会返回您要求的数据。否则事情会变得具体甚至棘手。

与其说是真正的答案，不如说是评论。

【讨论】：