javascript容错处理代码(屏蔽js错误)

 更新时间:2017年01月20日 16:08:35   作者:前端菜鸟进阶中  
本文主要介绍了javascript的容错处理代码。具有一定的参考价值,下面跟着小编一起来看下吧

有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志,有时候更是直接弹出错误无法继续浏览页面,这样对于网站的正规性与权威性发展不利。

国外银行页面就是因为这样的错误,导致用户大量流失不敢用这个银行的网上银行等导致损失惨重。

所以一个想要在用户体验与公司实力上都是不容出现的错误,就是不影响使用也不能让用户反感,脚本之家一直致力于为大家提高更好的代码,所以这里我们将会大家整理一些常用的代码,使用方法什么,希望大家以后能越来越支持我们,让我们共同发展。

第一种:脚本之家在用的

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

使用方法:把以上代码加到你出错网页的head区域就可以了。

第二种:针对的是有时候因为一些脚本错误的,导致页面无法继续浏览,这个问题是非常严重的,用户的大量流失,或根本无法查看你的网站内日

这个不是简单的脚本错误的问题了,主要是代码作者没有考虑完善,一定要好好的修改下, 不过如果你真的不会,那就用这样的代码吧

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>

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

相关文章

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    基于js里调用函数时,函数名带括号和不带括号的区别

    下面小编就为大家带来一篇基于js里调用函数时,函数名带括号和不带括号的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 提高Web性能的前端优化技巧总结

    提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。下面跟着小编一起来看下吧
    2017-02-02
  • Element Plus UI 组件库中 mt-x 类详解

    Element Plus UI 组件库中 mt-x 类详解

    在ElementPlusUI组件库中,mt-x类用于设置元素的外边距,其中"mt"代表"margin-top",x表示外边距的大小,这种类名的使用可以快速调整元素的顶部外边距,简化样式管理,确保设计的一致性,本文给大家介绍Element Plus UI 组件库中 mt-x 类基本知识,感兴趣的朋友一起看看吧
    2024-11-11
  • JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换

    JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换

    ECMAScript中的类型转换,学习js的朋友可以看看
    2012-02-02
  • Bootstrap 按钮样式与使用代码详解

    Bootstrap 按钮样式与使用代码详解

    这篇文章主要介绍了Bootstrap -- 按钮样式与使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 微信小程序实现计算器功能

    微信小程序实现计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JS+php后台实现文件上传功能详解

    JS+php后台实现文件上传功能详解

    这篇文章主要介绍了JS+php后台实现文件上传功能,结合实例形式分析了javascript前台表单数据提交与后台php文件传输处理相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 在 JavaScript 中管理 Token 的最佳实践记录

    在 JavaScript 中管理 Token 的最佳实践记录

    文章介绍了在JavaScript中管理Token的最佳实践,包括Token的作用、存储方式、代码实现和安全性考虑,通过示例代码,展示了如何在不同环境中动态设置Token作用域,并提供了安全存储和保护Token的方法
    2024-11-11
  • 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    兼容IE、Firefox、Opera前几天在网上找了许多资料,看了不少兄弟的源码,一直找不到合适的,要不就是拖动有问题,要不就是不兼容Firefox,所以自已写了一个,下面是代码:
    2008-04-04
  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向。本篇文章通过实例给大家介绍基于iframe/FormData/FileReader三种无刷新上传文件的方法,感兴趣的朋友一起学习吧
    2015-12-12

最新评论