本文介绍一种利用JavaScript在前端检测网站链接是否有效的方法。通过动态创建宽高为0的不可见图片，利用其src属性请求目标URL，并通过onerror事件捕获加载失败的状态来判断链接是否可达。该方法无需后端支持，适合简单的连通性测试场景。
JavaScript检测链接有效性的原理
本文详细介绍了一种使用JavaScript检测网站链接有效性的技术方案。以下内容供开发者参考与实践。
通常检测链接是否存在需要依赖服务器端的高级语言，但实际上，客户端的JavaScript同样具备这一能力。本文将通过一个具体的技巧，展示如何在前端实现链接探测功能。
完整HTML与JS代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js探测网站链接</title>
</head>
<body>
<div id="url1"></div>
<br/>
<div id="url2"></div>
<script language="JavaScript">
function butt(){
tim=1;
setInterval("tim++",100);
autourl1="http://www.163.com"
autourl2="https://www.jb51.net"
var url1=document.getElementById("url1");
var url2=document.getElementById("url2");
url1.innerHTML=" 测试连接:http://www.163.com,测试中..... ";
url2.innerHTML=" 测试连接:https://www.jb51.net,测试中..... ";
}
function auto(url){
if(tim>20) {
document.all(url).innerHTML=" 链接超时 "
}else{
document.all(url).innerHTML=" 链接耗时："+tim/10+"秒 "
}
//b++
}
function run(){
document.write("<img src="+autourl1+"/"+Math.random()+" width=0 height=0 onerror=auto('url1')>")
document.write("<img src="+autourl2+"/"+Math.random()+" width=0 height=0 onerror=auto('url2')>")
}
butt()
run()
</script>
</body>
</html>技术实现细节解析
该代码的核心原理是动态生成一个宽高均为0的不可见图片元素。由于该图片的src指向的目标链接可能不存在，浏览器在加载时会返回错误响应，从而触发onerror事件。通过监听这一事件及其返回状态，即可判断目标链接是否可访问。
如需了解更多JavaScript相关技术，建议查阅本站专题：《JavaScript窗口操作与技巧汇总》、《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》。
希望上述内容能对您的JavaScript编程工作提供有益帮助。