动态 JS 加载中的错误处理

Question

我正在加载一个 JS 文件，该文件仅适用于我的网页的一部分，仅当用户导航到页面上的该选项卡时。​​p>

var scriptFile = document.createElement("script");
scriptFile.setAttribute("type", "text/javascript");
scriptFile.setAttribute("src", scriptURL);

我正在尝试为此动态加载提出一种错误处理机制，以便在 JS 加载超时或 JS 在 URL 指定的位置不可用时显示错误消息。

这就是我尝试实现错误处理的方式（对于 IE）：

scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
        // Display content in tab
    } else {
        // Display error message
    }
}

这导致了一个问题。当一切正常并且 JS 按预期存在时，我会先收到错误消息，然后才是正确的内容。

经过一番头脑风暴，我发现readyState是先从“未初始化”变为“正在加载”，然后再变为“已加载”。当状态为“正在加载”时，显示错误消息。之后，状态变为“已加载”，此时正在显示内容。

任何想法如何处理这个问题，以便最初不显示错误？

Answer 1

因为没有“哎呀我死了！”状态，不能显示错误信息。

编辑：删除了代码，因为我的意思是你不能这样做。使用 AJAX 请求，您可以检查响应并查看它是否为 404，但您不能使用脚本标记来执行此操作。

edit2：再想一想，为什么不通过 AJAX 获取脚本并在 document.body 中注入一个 ''？ p>

要检查 AJAX 请求是否已被轰炸，请检查 XMLHTTPRequest 对象的状态属性。如果是 404，那就是 404。

另外，您不应该手工做这些事情。我总是建议使用 Prototype 或 jQuery。由于我已经被 Prototype 宠坏了，我不应该试图解释如何检查请求的状态。为什么不在这里问另一个问题如何处理 AJAX 请求？专业人士肯定会告诉你如何处理各种故障，而不仅仅是 404。

Answer 2

如果有一个（全局）变量来检查它是否已加载（例如，脚本将在加载完成后设置它）然后用计时器设置另一个函数（已经在加载函数之前的页面上）来检查该变量如何？ （例如 5 秒延迟？）

如果未设置变量（在预定义的时间后），向用户显示错误。

Answer 3

我认为你需要废弃“else”，因为它总是会经历“加载”状态，无论它是否可以工作，所以“else”分支没有做任何有用的事情。

改为设置超时。

var scriptTimer = setTimeout(function() {
  // show error message
  // (should ideally precede with a check the content hasn't
  // been displayed, in case of race condition)
});
scriptFile.onreadystatechange = function() { // For IE
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
       clearTimeout(scriptTimer);
       // now display content in tab
    }
}

Answer 4

编辑：我的方法是错误的 - 按照 Kaze 的建议使用 AJAX