Question

我正在创建一个包含多个内容页面的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函数。

我该如何解决这个问题？

Answer 1

你想要做的事情当然是可能的，但从长远来看，它不会是非常可维护的。

您遇到的最大问题之一是将ajax加载的html中的代码正确地注入当前页面。您不能忽略它并让它全部运行，因为您将多次包含库（导致插件被覆盖/删除），并且您正在加载的页面的代码可能会很快到期已经准备好了。

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

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

你也可能只为你的部分提供<div id="#content">...</div>，这对你的用例更有意义。

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

Answer 2

您可以在已加载的页面上调用原始脚本中的函数。对于Instance，您可以在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>

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

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

2 个答案: