如何使用JavaScript检测页面404错误？

Question

我有一个HTML页面,其中引用了几个JavaScript,CSS和图像文件.这些引用是动态注入的,用户可以手动将HTML页面和支持文件复制到另一台机器.

如果缺少某些JS或CSS,浏览器会在控制台中抱怨.例如:

错误GET文件:/// E:/SSC_Temp/html_005/temp/Support/jquery.js

我需要以某种方式在HTML页面的内联JavaScript上向我报告这些错误,因此我可以要求用户首先验证是否正确复制了支持文件.

有一个window.onerror事件告诉我,页面上有一个JS错误,例如意外语法错误,但是如果发现404 Not Found错误,则不会触发.我想在任何资源类型的情况下检查这种情况,包括CSS,JS和图像.

我不喜欢使用jQuery AJAX来验证文件是否物理存在 - 每个页面加载的I/O开销都很昂贵.

错误报告必须包含缺少的文件的名称,以便我可以检查文件是核心还是可选的.

有任何想法吗？

Answer 1

要捕获所有error的页面上的事件,您可以使用addEventListener与useCapture设置参数true.之所以window.onerror不这样做,是因为它使用了泡沫事件阶段,而error您想要捕获的事件不会冒泡.

如果在加载任何外部内容之前将以下脚本添加到HTML中,则应该能够捕获所有error事件,即使在脱机加载时也是如此.

<script type="text/javascript">
window.addEventListener('error', function(e) {
    console.log(e);
}, true);
</script>

您可以访问导致错误的元素e.target.例如,如果您想知道哪些文件没有加载到img标记上,您可以使用它e.target.src来获取无法加载的URL.

注意:这在技术上不会检测错误代码,但如果图像加载失败,无论状态代码如何,它在技术上都表现相同.根据您的设置,这可能就足够了,但是例如,如果返回带有效图像的404,则不会触发错误事件.