当外部 JavaScript 或 CSS 资源加载失败时检测并记录答案

【问题标题】：Detect and log when external JavaScript or CSS resources fail to load当外部 JavaScript 或 CSS 资源加载失败时检测并记录
【发布时间】：2011-08-06 17:31:50
【问题描述】：

我有多个 <head> 对外部 js 和 css 资源的引用。大多数情况下，这些是用于第三方分析等。有时（有趣的是）这些资源无法加载，通常会导致浏览器超时。是否可以在外部 JavaScript 或 CSS 资源加载失败时检测并登录服务器？

我正在考虑某种类型的延迟加载机制，当失败时，将调用一个特殊的 URL 来记录此失败。有什么建议吗？

我认为会发生什么：

用户点击我们的页面，服务器端处理成功并提供页面
在客户端，HTML 标头尝试连接到我们的第 3 方集成合作伙伴，通常通过以“http://www.someothercompany.com...”开头的 javascript 包含。
另一家公司无法处理我们的负载或正常运行时间很差，因此连接失败。
用户看到一个通用 IE 页面未找到，而不是来自我们服务器的页面。

因此，即使我的网站已启动并且其他一切都运行良好，只是因为对第三方服务器的调用失败，在 HTML 页面标题中调用失败，我们就完全无法启动。

【问题讨论】：

@hippietrail，请从该 URL 中删除 #comment10730182_538848。
另见How to tell if a <script> tag failed to load

标签： javascript jquery css http timeout

【解决方案1】：

您可以在 JavaScript 中查找对象是否存在，例如查看 jQuery 是否已加载...

if (typeof jQuery !== 'function') {
   // Was not loaded.
}

jsFiddle.

您还可以检查缺少的 CSS 样式，例如，如果您知道某个 CSS 文件将背景颜色设置为 #000。

if ($('body').css('backgroundColor') !== 'rgb(0, 0, 0)') {
   // Was not loaded.
}

jsFiddle.

当这些失败时，您可以向服务器发送 XHR 以记录这些失败。

【讨论】：

如果页面无法加载，我将无法执行这些操作。请参阅我对问题所做的编辑以进行澄清。

【解决方案2】：

对 js 名称和会话 cookie 进行哈希处理，并以纯格式发送 js 名称和哈希值。服务端，做同样的hash，如果是同样的log，如果不是，就认为是滥用。

【讨论】：

如果整个页面无法加载，我无法对任何内容进行哈希处理。请参阅我对问题所做的编辑以进行澄清。
我的意思是你将它与延迟加载 3rd 方 js 结合起来，之后你的页面就可以正常工作了；并在 js 加载失败时使用名称和哈希 ping 你的 js_failed_logger.php。您的问题暗示您关心的是这种被利用，而不是如何实现它。
谢谢。我想我最初对如何实现它很感兴趣。如果它有效，我可以弄清楚如何保护它。

【解决方案3】：

如果您的应用/页面依赖于 JS，您可以使用 JS 加载内容，我知道这很混乱。当用 JS 加载这些时，你可以有回调，让你只拥有加载内容的功能，而不必担心你没有加载的内容。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://domain.com/somefile.js';
script.onload = CallBackForAfterFileLoaded;
document.body.appendChild(script);
function CallBackForAfterFileLoaded (e) {
//Do your magic here...
}

我通常有一些相互依赖的 JS 和文件的数组，如果它们没有加载，那么我有一个错误状态。

我忘了提，显然我只是展示如何创建一个 JS 标签，您必须为要加载的其他类型的文件创建自己的方法。

希望对你有帮助，干杯

【讨论】：

这或多或少是我所追求的。我也发现了这种技术：friendlybit.com/js/lazy-loading-asyncronous-javascript
我猜你的意思是script.onload = CallBackForAfterFileLoaded;，没有()
是的，很抱歉！

【解决方案4】：

ServiceWorker 呢？我们可以用它来拦截所有的http请求并获取响应码来记录外部资源是否加载失败。

【讨论】：