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

AJAX ready event once HTML page and scripts are loaded

本文关键字：AJAX 就绪 事件 脚本 HTML 加载      更新时间：2023-09-26

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

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

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

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

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

我应该如何处理这个问题？

你正在尝试做的事情当然是可能的，但从长远来看，它不会非常易于维护。

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

这几乎给你留下了两个选择：依赖注入或前加载。

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

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

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

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

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

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

相关文章：