加载 HTML 页面和脚本后的 AJAX 就绪事件答案

【问题标题】：AJAX ready event once HTML page and scripts are loaded加载 HTML 页面和脚本后的 AJAX 就绪事件
【发布时间】：2014-12-22 22:05:00
【问题描述】：

我正在创建一个 Web 应用程序，其中包含多个内容页面，我使用 AJAX 和 HTML5 History API 动态加载这些内容。当用户尝试更改页面时，新内容会使用 $.get 加载并注入正文，如下所示：

$.get("somepage.html", function (data)
{
    $("body").html(data);
});

这些页面中的大多数都需要加载额外的脚本。除了 $(document).ready 在这些脚本加载之前触发之外，这不会是一个问题。 Somepage.html 看起来像这样。

<script src='http://getjquerysomewhere/'></script>
<script src='my_script_that_depends_on_jQuery'></script>

由于这些页面必须能够自行加载，因此这个问题变得复杂。因此，我不确定如何在不影响此行为的情况下消除 $(document).ready 函数。

我应该如何解决这个问题？

【问题讨论】：

你可以使用Promise。
在我看来你需要一个依赖注入框架，或者，你只需要预先加载所有代码。
我假设您的意思是以前的依赖注入？我过去使用过 require.js，似乎做得很好。我对现在可用的东西不太熟悉，因为我有一段时间不需要它了。我倾向于为应用程序预先加载大部分代码，而我的网站使用的 js 很少。
我不认为 20kb 会影响加载时间。
我倾向于避免在 html 中加载脚本，因为这样您就必须处理删除对已包含的库/插件的引用。那时它开始变得非常复杂。例如，您包含的演示 html 包含指向 jquery.js 的链接。在将元素编译到 dom 节点之前必须将其删除，这只能通过字符串操作来完成。如果你用 jQuery 解析它，它会在你删除它们之前执行脚本，从而破坏了用 ajax 加载页面的意义。

标签： javascript jquery ajax document-ready html5-history

【解决方案1】：

您尝试做的事情当然是可能的，但从长远来看，它不会很容易维护。

您将遇到的最大问题之一是将代码从 ajax 加载的 html 正确注入到当前页面中。您不能只是忽略它并让它全部运行，因为那样您将多次包含库（导致插件被覆盖/删除），并且由于 dom 已经加载的页面的代码可能过早发生准备好了。

这几乎让您有两个选择：依赖注入或前端加载。

依赖注入可能是这两者中最容易实现的，因为它需要对当前代码库进行最少的更改。您所要做的就是确保使用 ajax 请求的所有页面仅包含 <body> 的内容（可以使用服务器端代码完成），并确保在关闭 @987654322 之前包含所有特定于页面的代码每页的@。然后，您只需要使用依赖注入方法来运行具有正确依赖关系的代码。

您也可以让它只包含 <div id="#content">...</div> 用于您的部分，这对您的用例更有意义。

前端加载会有点困难，因为您将拥有一个包含所有页面的所有代码的巨大文件，除非您使用构建过程（如果您以前从未使用过构建过程，您真的应该尝试一下，即使您认为不需要它。）使用前端加载，您要么必须使用事件委托，要么为每个页面设置 init 方法您在加载每个页面时有选择地执行。如果没有良好的构建过程，这可能会成为可维护性的噩梦。

【讨论】：

【解决方案2】：

您可以从已加载页面上的原始脚本调用函数。例如，您可以在您的主目录中执行此操作：

<script>
    function ExternalScriptLoaded(){}
</script>

然后在您的外部页面上：

<script>
    try{ ExternalScriptLoaded(); }catch(err){alert('This page was not loaded with ajax because i can't find the function');}
</script>

如果脚本在您的主页上找不到该函数，则会触发警报。
即在您知道脚本已完成运行后调用该函数。
希望这会有所帮助。

【讨论】：

如果我调用的函数依赖于我不确定是否已加载的注入脚本文件，我怎么知道它会在适当的时间被调用？
这就是我最初的问题。希望我的编辑能够澄清。
您是否创建了正在注入的脚本文件？如果是这样，document.ready 将在其中触发，然后一旦完成解析，请执行 try catch。否则你可以使用 .done 并在那里调用它？
第一个不是我创建的，第二个是我创建的，但这取决于第一个。
所以从技术上讲，您应该知道第二个脚本何时解析，因为第一个脚本是先决条件。然后，您可以在准备好时执行 try catch。