JavaScript 容错处理:屏蔽脚本错误与 Try...Catch 用法

作者:异步漫步

时间:2026-10-24

浏览:378

本文介绍JavaScript中两种常见的容错处理机制。第一种通过window.onerror函数返回true来屏蔽页面脚本错误,防止因单个脚本报错导致页面无法浏览。第二种推荐使用try...catch语句进行更精细的错误捕获,通过try块执行代码,catch块处理异常,确保程序在出错时仍能给出友好提示或执行备用逻辑。

文章目录

JavaScript 容错处理概述

国外银行页面曾因此类错误导致用户大量流失,进而引发网上银行使用率下降及严重经济损失。



因此,为了保障用户体验与公司实力,必须避免此类错误。即使错误不影响核心功能,也不应让用户感到反感。本站致力于提供优质的代码资源,以下整理了一些常用的容错代码及其使用方法,希望能获得大家的支持,共同促进技术发展。



第一种:本站自己也在用的

屏蔽脚本错误:window.onerror

代码如下:

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

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



第二种

这种方法主要针对因脚本错误导致页面无法继续浏览的严重问题。此类问题后果严重,可能导致用户大量流失或根本无法查看网站内容。


这不仅仅是简单的脚本错误问题,更多是代码作者未考虑周全所致,建议尽量完善代码。但如果确实无法修改,可以使用上述代码进行屏蔽。


精细错误捕获:Try...Catch 语句

try...catch 语句用于测试代码中可能出现的错误。try部分包含需要运行的代码,而catch部分包含当错误发生时执行的代码。


语法:


代码如下:

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

注意:try...catch 必须使用小写字母,大写字母会导致错误。


Try...Catch 实例演示

实例 1


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


 <html> <head>  </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> 


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


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


 <html> <head>  </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> 


实例 2


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


 <html> <head>  </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> 

 

相关更多js 容错的处理可以参考下面的两篇文章:


JavaScript Try...Catch 语句



JavaScript容错例外处理

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章