通过 AJAX 加载的 HTML 内容会乱序加载外部 JavaScript答案

【问题标题】：HTML content loaded via AJAX loads external JavaScript out of order通过 AJAX 加载的 HTML 内容会乱序加载外部 JavaScript
【发布时间】：2020-01-07 13:28:02
【问题描述】：

这是场景，不知道我错过了什么。

页面 A.htm 向页面 B.htm 发出 ajax 请求，并将响应插入到页面中。
页面 B.htm 包含指向其他几个 JS 文件的链接，其中许多文件包含一个 document.ready() 函数来初始化它们。

当 A.htm 和 B.htm 在同一台服务器上时，这可以正常工作，但在它们位于不同服务器上时则不行。

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

感谢任何指针或建议。抱歉解释不佳。

【问题讨论】：

已经有一段时间没用过jQuery了，但是.ajax不返回一个promise吗？您可以调用 .done(second ajax request) 以确保它们以正确的顺序返回吗？类似于： $.ajax().done(function(data){ if (data) {$.ajax()} )
没有第二个ajax请求。至少现在还没有——我们需要先正确加载这些外部资源！ :)
好的。但是这样的事情会起作用吗？ $.ajax(一些请求).done(function(data){做第二个任务})。基本上等待返回的脚本，然后再继续进行其他操作？对不起，如果我误解了这个问题。
容易误会。 A.htm 中没有第二个任务，它想要加载 B.htm 并且外部脚本包含下一个任务......但它们无法触发，因为它们试图无序触发。 $ 未定义，因为 jquery.min.js 在 my.module.js 尝试使用它之前没有加载。
我猜当你在 DOM 中注入 JavaScript 文件时，它们的执行顺序并不能保证。较小的 JS 文件可能会在较大的 JS 文件之前加载和执行。我看看能不能找到具体的参考资料。

标签： javascript jquery ajax

【解决方案1】：

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

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

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

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

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

另一种解决方案是滚动您自己的 jQuery 函数，该函数将：

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

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

【讨论】：

谢谢。看起来我的手上一团糟:) 我希望 JAWR 将所有内容捆绑到一个文件中将有助于在一定程度上解决问题。

【解决方案2】：

您的印象是正确的，即问题在于跨域处理请求的方式不同。

这里有一个链接可以让你走上正轨：How to make synchronous JSONP crossdomain call

但是，在继续之前，您将不得不重新设计您的解决方案，以检查资源是否已加载。有很多解决方案（见链接）

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

注意，由于jquery UI是一个比较大的文件，可以想象跨域请求先完成，然后立即执行，即使jqueryUI还没有加载。在任何情况下，您都必须开始考虑让您的应用做出反应，而不是遵循顺序。

【讨论】：