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

Posted YFun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 JS 检测网址能否正常加载相关的知识,希望对你有一定的参考价值。

有时我们需要判断用户能否加载某些网页或服务,如 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 体验。

以上是关于使用 JS 检测网址能否正常加载的主要内容,如果未能解决你的问题,请参考以下文章

js 检测网址是不是能正常访问用js实现,判断指定的url是不是有效,涉及到跨域,返回的状态是0,求大神指教,

关于js----------------分享前端开发常用代码片段

angularJS使用ocLazyLoad实现js延迟加载

PHP UEditor富文本编辑器 上传显示 后端配置项没有正常加载,上传插件不能正常使用!

Android:使用Tab检测单个片段viewpager

Chrome-Devtools代码片段中的多个JS库