动态 JS 加载中的错误处理

Question

仅当用户导航到页面上的该选项卡时，我才加载网页的一部分所需的 JS 文件。

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 内？

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

此外，您不应该手动执行此操作。我总是建议使用 Prototype 或 jQuery。由于我已经被 Prototype 宠坏了，所以我不应该尝试解释如何检查请求的状态。为什么不在此处的另一个问题中询问如何处理 AJAX 请求？专业人士肯定会告诉您如何处理各种故障，而不仅仅是 404。

Answer 2

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

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

Answer 3

我认为你需要废弃“else”，因为它总是会经历“loaded”状态，无论它是否会工作，所以“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