通过 AJAX 加载的 HTML 内容无序加载外部 JavaScript

Question

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

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

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

这在 A.htm 和 B.htm 在同一台服务器上时工作正常，但在不同服务器上时则不然。

我想我在这里看到的是，当页面 A 和 B 在不同的服务器（跨域 ajax）上时，外部资源是异步返回的，或者至少是乱序返回的，因此脚本正在执行，期望 JQuery.UI已经加载，当它不是。

感谢任何指示或建议。 为糟糕的解释道歉。

Answer 1

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

• 除了脚本之外的 HTML 内容都被注入到文档中
• 然后所有脚本一一执行
• 如果脚本是外部的，那么它会被异步下载和执行

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

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

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

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

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

---

^{* 没有记录确切的行为。 我不得不查看源代码来推断细节。}

Answer 2

您认为问题在于跨域处理请求的方式不同，这是正确的。

这是一个让您走上正轨的链接： 如何进行同步 JSONP 跨域调用

但是，您实际上必须重新构建您的解决方案，以在继续之前检查资源是否已加载。 有很多解决方案（见链接）

您可以设置一个计时器间隔并检查 dom 中的某些内容，或者另一个合理的解决方案（尽管它缺乏效率）是在您的服务器上创建一个“代理”服务器端（例如 php）文件并让该文件进行跨域请求，然后吐出结果。

请注意，由于 jquery UI 是一个相当大的文件，因此可以想象跨域请求首先完成，并立即执行，即使尚未加载 jqueryUI。 在任何情况下，您都将不得不开始考虑让您的应用做出反应，而不是遵循一个顺序。