javascript - 如何使用 JavaScript 检测页面上的 404 错误？

Question

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

如果缺少一些 JS 或 CSS，浏览器会在控制台中提示。例如:

Error GET file:///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 并带有有效图像，则不会触发错误事件。