我正在创建一个 Web 应用程序，其中包含多个内容页面，我使用 AJAX 和 HTML5 History API 动态加载这些内容。当用户尝试更改页面时，新内容将通过 $.get 加载并注入(inject)到正文中，如下所示:
$.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 函数而不影响此行为。
我应该如何解决这个问题？
最佳答案
您尝试做的事情当然是可能的，但从长远来看它不会很好维护。
您将遇到的最大问题之一是将 ajax 加载的 html 中的代码正确注入(inject)到当前页面中。你不能只是忽略它并让它全部运行，因为这样你将多次包含库(导致插件被覆盖/删除)，并且由于 dom 已经存在，你正在加载的页面的代码可能会发生得太快准备好了。
这几乎给你留下了两个选择:依赖注入(inject)或前端加载。
依赖注入(inject)可能是两者中最容易实现的，因为它需要对当前代码库进行的更改最少。您所要做的就是确保使用 ajax 请求的所有页面仅包含 <body> 的内容(可以使用服务器端代码来完成)，并确保在结束 </body> 之前包含所有特定于页面的代码。每页的。然后，您只需使用依赖项注入(inject)方法来运行具有适当依赖项的代码。
您也可以只包含 <div id="#content">...</div>对于您的部分，这对您的用例更有意义。
前端加载会稍微困难一些，因为您将拥有一个巨大的文件，其中包含所有页面的所有代码，除非您使用构建过程(如果您'以前从未使用过构建过程，您确实应该尝试一下，即使您认为不需要它。)通过前端加载，您要么必须使用事件委托(delegate)，要么为每个页面提供 init 方法您在加载每个页面时有选择地执行。如果没有良好的构建流程，这可能会成为可维护性的噩梦。
关于javascript - HTML 页面和脚本加载后，AJAX 就绪事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27611131/