javascript - 通过 AJAX 加载的 HTML 内容会乱序加载外部 JavaScript

Question

这是场景，不确定我错过了什么。

• 页面 A.htm 向页面 B.htm 发出 ajax 请求，并将响应插入到页面中。

• Page B.htm 包含指向其他几个 JS 文件的链接，其中许多文件包含用于初始化它们的 document.ready() 函数。

当 A.htm 和 B.htm 位于同一服务器上时，此方法可以正常工作，但当它们位于不同服务器上时，则效果不佳。

我认为我在这里看到的是，当页面A和B位于不同的服务器上(跨域ajax)时，外部资源将异步返回，或者至少是乱序返回，因此脚本正在执行，期望 JQuery.UI 已加载，但实际上尚未加载。

感谢任何指示或建议。对于糟糕的解释表示歉意。

Answer 1

您正在通过 jQuery 注入(inject) HTML + 脚本标签。在这种情况下*:

• 文档中注入(inject)除脚本之外的 HTML 内容
• 然后将所有脚本一一执行
• 如果脚本是外部脚本，则异步下载并执行该脚本

因此，依赖于 jQuery UI 的外部或内联脚本可能会在 jQuery UI 之前执行。

一种可能的解决方案是更改页面的工作方式:

• 删除 pageb.html 中的外部脚本，但保留内联脚本
• 在 pagea.html 中加载所需的脚本
• 加载pageb.html

另一个解决方案是推出您自己的 jQuery 函数，它将:

• 删除所有 <script src> HTML 元素
• 按顺序下载并执行这些脚本
• 注入(inject)剩余的 HTML

---

^{* 确切的行为没有记录。我不得不调查source code推断细节。}