侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 285 篇文章
  • 累计创建 125 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

让你的浏览器屏蔽js错误提示,实现JS容错功能

孔子说JAVA
2022-05-17 / 0 评论 / 0 点赞 / 136 阅读 / 2,242 字 / 正在检测是否收录...

当网页JS运行出错的时候,会在浏览器的状态栏显示出错的小图标,或者用F12打开开发者调试工具,可以在控制台看到js的错误信息。如果你是做二次开发,对别人的js代码不了解,且这个js错误对程序的运行没有实质的影响,那么你就可以用下面的方法来禁止浏览器提示这种信息,屏蔽掉出错提示。

  • 注意:如果js报错,但不影响js的执行(最终效果),则可使用这种屏蔽方法;如果js报错,并导致js无法顺利执行完毕,就必须找出报错的问题所在了,这才是最终的解决方法。

1、使用window.onerror属性

第一种方法为使用window.onerror属性,这种方式可以屏蔽所有js错误,所以有可能会屏蔽掉一些关键信息,使你不能第一时间发现你的代码问题,最终导致代码结果与期望不符。不推荐使用该方式。

具体方式是在网页head区域添加window.onerror属性,并将其对应函数返回值设为true即可屏蔽错误。代码如下:

<script language="javascript">
<!--屏蔽JS错误  
function killerrors() {
return true;
}
window.onerror = killerrors;
//-->
</script> 

这段代码的意思很简单,就是在页面出现js执行错误时,照样返回最终执行结果,而不是默认的报错,并中断JS的执行!

js报错例子:

<html>
<head>
  <title>屏蔽JS错误页面</title>
  <script language="javascript">
     // 这个语句正常是会报错的
  	  var a = ;
  </script>
</head>
<body>
  该页面会报js错误
</body>
</html>

在电脑桌面新建1个txt文档,复制上述代码保存到txt文档中,重命名该txt文档名为js.html(注意扩展名需要为html),用浏览器打开该页面,按F12打开开发者工具,可以看到控制台有js错误提示。如下图。

image-1652747712144

使用window.onerror属性的例子:

在上述代码的 <script language="javascript"> 前面增加屏蔽JS错误的脚本,完整例子如下。

<html>
<head>
  <title>屏蔽JS错误页面</title>
  <script language="javascript">
    <!--屏蔽JS错误  
    function killerrors() {
    return true;
    }
    window.onerror = killerrors;
    //-->
  </script>
  <script language="javascript">
     // 这个语句正常是会报错的
  	  var a = ;
  </script>
</head>
<body>
  该页面永远不会报js错误
</body>
</html>

保存后按同样的步骤操作,可以看到控制台已经没有js错误提示了。

image-1652748021591

2、使用try…catch

第二种方法是使用 try...catch 语句,针对的是有时候因为一些脚本错误的,导致页面无法继续浏览,这个问题是非常严重的,用户的大量流失,或根本无法查看你的网站内容。针对的是指定代码段的异常处理,不像方式1中简单粗暴的对所有js错误都屏蔽掉了。主要应用场景是对某一段代码产生的异常进行针对性的处理,处理方式可以是输出一段说明(如使用console.log语句),也可以是明确的进行一些处理(如对象的重新赋值),或者干脆不进行任何处理(空白代码)、

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

  • 注意:try…catch 使用小写字母。大写字母会出错。
try{
  //在此运行代码
} catch(err) {
  //在此处理错误
}

使用try…catch的例子:

我们来写个例子验证一下,下例的本意是当用户点击按钮时显示 “Welcome guest!” 这个消息。只不过 message() 函数中的 alert() 被误写为 addlert()。这时错误发生了:

function message(){
  addlert("Welcome guest!")
}

我们可以在上述语句中添加 try...catch 语句,这样当错误发生时可以采取更适当的措施。下面的例子用 try...catch 语句重新修改了脚本,不过这一次,catch 部分捕获到了错误,并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。

var txt=""
function message(){
  try{
    adddlert("Welcome guest!")
  } catch(err) {
    txt="该页发生了一个错误。\n\n"
    txt+="错误信息: " + err.description + "\n\n"
    txt+="点击确认继续。\n\n"
    alert(txt)
  }
}
0

评论区