使用 JS 检测网址能否正常加载

Posted 2021-09-09 YFun

有时我们需要判断用户能否加载某些网页或服务，如 Google、Disqus 等。

而我们可以用 javascript 来实现这样的检测功能。

方法一

使用 JavaScript 创建一个图片，设置图片的链接为 检测网址 + favicon.ico。

onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。

代码：

// 新建一个图片
var img = new Image();
// 设置图片的链接
img.src = "https://google.com/favicon.ico";

// 设定超时事件，延迟 3000 毫秒
var timeout = setTimeout(function () {
    // 清除 onerror 和 onload 事件
    img.onerror = img.onload = null;
    console.log("time out.");
    // 执行无法加载的事件
    canNotLoad();
},3000);

// 设定错误事件
img.onerror = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("load error.");
    // 执行无法加载的事件
    canNotLoad();
}

// 设定可以加载的事件
img.onload = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("ok.");
    // 执行可以加载的事件
    canLoad();
}

function canNotLoad() {
    /* code here */
    console.log("无法加载");
}
function canLoad() {
    /* code here */
    console.log("可以加载");
}

缺点：不是每一个网站都存在 /favicon.ico 文件，但如果加载特定文件的话挺好的。

方法二

使用 JavaScript 创建一个 iframe 标签，设置标签的链接为 检测网址。

onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。

代码：

// 新建 iframe 标签
var iframe = document.createElement("iframe");

// 设置 iframe 标签的网址
iframe.src="https://google.com";

// 设定超时事件，延迟 3000 毫秒
var timeout = setTimeout(function () {
    // 清除 onerror 和 onload 事件
    iframe.onerror = iframe.onload = null;
    console.log("time out.");
    // 执行无法加载的事件
    canNotLoad();
},3000);
// 设定错误事件
iframe.onerror = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("load error.");
    // 执行无法加载的事件
    canNotLoad();
}
// 设定可以加载的事件
iframe.onload = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("ok.");
    // 执行可以加载的事件
    canLoad();
}

function canNotLoad() {
    /* code here */
}
function canLoad() {
    /* code here */
}
// 设定为不可见
iframe.style = "display: none!important;";
// 向 body 添加 iframe
document.body.appendChild(iframe);

缺点：页面上的其他外部链接也会被一并的加载过来，例如 JS 文件，CSS 文件，统计代码。

您也可以 点击此链接 前往 CodePen 体验。