Question

是否有一种方法可以检测到JS中不是404的资源加载失败？

<html><body>
<img>
<script>

window.addEventListener('error', function (e) {
  console.log(e);
}, true);

document.querySelector("img").src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

</script></body></html>

我得到了类似的Event对象，但没有有关404的详细信息，也没有关闭wifi。有没有办法区分这两种情况？我想将404视为可以，但将网络（套接字）故障视为错误。

Answer 1

您得到的事件不会告诉您，不。但是有各种API可以帮助您了解发生了什么。您可以检查navigator.onLine flag，但要注意，它告诉您不同品牌的浏览器中的细微差别。（您还可以通过window上的online和offline事件来监听在线/离线更改。）

使用navigator.onLine：

window.addEventListener('error', function (e) {
    if (navigator.onLine) {
        // It was probably a 404 or some other problem with this specific image
    } else {
        // User is "offline," according to the browser's rules for what's online and offline
    }
});

Answer 2

有一些老式的方法可以检测图像和脚本文件的加载是否成功。

使用img元素，您可以内联或附加后现代元素来添加onerror事件处理程序。

对于JavaScript文件，如果定义了一个函数，则该函数将位于全局名称空间中。例如，test.js：

testfunc=function(){

}

然后，您将包含不知道是否已加载JavaScript文件的JavaScript文件：

&lt;script src="test.js"&gt;&lt;/script&gt;

但是您可以查询该标志：

if (!self.testfunc) // test.js failed to load

JavaScript：检测资源加载失败（不是404）

2 个答案: