JavaScript容错处理:屏蔽JS错误与try...catch实战

作者:代码拾荒

时间:2026-10-21

浏览:270

本文介绍两种JavaScript容错处理方法。第一种通过window.onerror函数屏蔽IE等浏览器的错误提示,防止页面中断。第二种利用try...catch语句捕获脚本错误,提供自定义错误提示或用户交互选项,如确认是否继续浏览。

文章目录

JavaScript容错处理:屏蔽JS错误与try...catch实战

浏览网页时,IE浏览器左下角常出现黄色错误标志,甚至弹出错误提示导致页面无法继续浏览,这会影响网站的正规性与权威性。

国外银行网站因此类错误导致用户大量流失,不敢使用网上银行,造成严重损失。

为了提升用户体验和公司实力,不能容忍影响使用的错误,即使不影响使用也不能让用户反感。本站致力于提供优质的代码,整理常用代码及使用方法,希望得到大家的支持,共同发展。

第一种方法:屏蔽错误提示

第一种方法:本站正在使用的方法。


<SCRIPT language=javascript> 
<!-- 
window.onerror=function(){return true;} 
// --> 
</SCRIPT> 

使用方法:将上述代码添加到出错网页的head区域即可。

第二种方法:使用try...catch语句

第二种方法:针对因脚本错误导致页面无法继续浏览的问题,这非常严重,可能导致用户大量流失或无法查看网站内容。

这不仅仅是简单的脚本错误,主要是代码作者考虑不周,需要仔细修改。如果确实不会修改,可以使用以下代码。

try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。

语法:

复制代码 代码如下:


try 
{ 
//在此运行代码 
} 
catch(err) 
{ 
//在此处理错误 
} 

注意:try...catch 使用小写字母。大写字母会出错。

实例 1

下面的例子原本用在用户点击按钮时显示 "Welcome guest!" 这个消息。不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了:


<html> 
<head> 
<script type="text/javascript"> 
function message() 
{ 
adddlert("Welcome guest!") 
} 
</script> 
</head> 
<body> 
<input type="button" value="View message" onclick="message()" /> 
</body> 
</html> 

我们可以添加 try...catch 语句,这样当错误发生时可以采取更适当的措施。

下面的例子用 try...catch 语句重新修改了脚本。由于误写了 alert(),所以错误发生了。不过这一次,catch 部分捕获到了错误,并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。


<html> 
<head> 
<script type="text/javascript"> 
var txt="" 
function message() 
{ 
try 
{ 
adddlert("Welcome guest!") 
} 
catch(err) 
{ 
txt="此页面存在一个错误。\n\n" 
txt+="错误描述: " + err.description + "\n\n" 
txt+="点击OK继续。\n\n" 
alert(txt) 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="View message" onclick="message()" /> 
</body> 
</html> 

实例 2

下一个例子会显示一个确认框,让用户来选择在发生错误时点击确定按钮来继续浏览网页,还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false,代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true,那么代码什么也不会做。


<html> 
<head> 
<script type="text/javascript"> 
var txt="" 
function message() 
{ 
try 
{ 
adddlert("Welcome guest!") 
} 
catch(err) 
{ 
txt="There was an error on this page.\n\n" 
txt+="Click OK to continue viewing this page,\n" 
txt+="or Cancel to return to the home page.\n\n" 
if(!confirm(txt)) 
{ 
document.location.href="http://www.w3school.com.cn/" 
} 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="View message" onclick="message()" /> 
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章