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


Posted in Javascript onJanuary 20, 2017

有时候大家来浏览网页的时候发现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>

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

Javascript 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
关于AngularJs数据的本地存储详解
Jan 20 #Javascript
html5 canvas 详细使用教程
Jan 20 #Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
PHP的FTP学习(三)
2006/10/09 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python shelve模块实现解析
2019/08/28 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
高中运动会广播稿
2014/01/21 职场文书
新课培训心得体会
2014/09/03 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
公司催款律师函
2015/05/27 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL