本文介绍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容错例外处理