Question

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

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

我认为发生了什么：

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

所以，即使我的网站已启动，其他一切运行正常，只是因为这个调用第三方服务器失败了，一个在HTML页面标题中，我们完全无法启动。

Answer 1

如果您的应用/页面依赖于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标记，你必须为你想要加载的其他类型的文件创建自己的方法。

希望也许有帮助，欢呼

Answer 2

您可以在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以记录这些失败。

Answer 3

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

Answer 4

创建js名称和会话cookie的哈希值，并以plain和hash发送两个js名称。服务器端，如果两者都是相同的日志，则进行相同的哈希，如果不是，则认为它是滥用。

检测并记录外部JavaScript或CSS资源无法加载的时间

4 个答案: