`

JavaScript中try...catch与onerror事件的使用

阅读更多
JavaScript - 捕获错误

当我们在网上冲浪时,总会看到带有 runtime 错误的 Javascript 警告框,同时会询问我们“是否进行 debug?”。像这样的错误信息或许对开发人员有用,对用户则未必。当错误发生时,他们往往会选择离开这个站点。

本节向你讲解如何捕获和处理 Javascript 的错误消息,这样就可以为受众提供更多的便利。

有两种在网页中捕获错误的方法:

    * 使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
    * 使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意:chrome、opera 和 safari 浏览器不支持 onerror 事件。

try...catch 的作用是测试代码中的错误。

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

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

注意:try...catch 使用小写字母。大写字母会出错。

例子1

用 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+="点击“确定”继续。\n\n"
   alert(txt)
   }
}
</script>
</head>

<body>
<input type="button" value="查看消息" 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>

onerror 事件

我们马上会讲解 onerror 事件。但首先您需要学习如何使用 throw 语句来创建异常。throw 语句可以与 try...catch 语句一起使用。

throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。
语法:

throw(exception)

exception 可以是字符串、整数、逻辑值或者对象。

注意:使用小写字母编写 throw。使用大写字母会出错!
实例 1

下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0,错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后,就会显示出自定义的出错信息。

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>

只要页面中出现脚本错误,就会产生 onerror 事件

如果需要利用 onerror 事件,就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用:msg(错误消息)、url(发生错误的页面的 url)、line(发生错误的代码行)。
语法:

onerror=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

浏览器是否显示标准的错误消息,取决于 onerror 的返回值。如果返回值为 false,则在控制台 (JavaScript console) 中显示错误消息。反之则不会。
实例:

下面的例子展示如何使用 onerror 事件来捕获错误:

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

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

</html>
分享到:
评论

相关推荐

    W3C JavaScript 高级教程.rar

    JavaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。 本教程是 w3school JavaScript 教程的高级版本。 本教程从 JavaScript 的历史...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    tryjs实现JStrycatch错误捕捉

    目前retcode上报使用的log上报使用的是window.onerror上报,对于跨域脚本出现80%以上的错误信息是script error,这些对于开发者来说是无效的,所以需要使用try...catch可以抓取绝大多数作用域下的js运行错误堆栈信息...

    JavaScript完全自学宝典 源代码

    7.8.html onsubmit事件使用方法。 7.9.html 失去焦点时检验文本框的值。 7.10.html 获得焦点时文本框样式更改。 img.JPG onblur事件中加载的图片文件。 第8章(\c08) 示例描述:学习JavaScript中...

    catchall:捕获所有 javascript 错误

    中间件插件与超级重要的注意事项所有函数都包含在 try-catch 块中,因此将其用于生产代码将是一个糟糕的主意。例子创建一个名为script.js的文件: //only catch all if functions have been wrapped aroundif ( ...

    JavaScript权威指南

    try/catch/finally Section 6.18. with Section 6.19. The Empty Statement Section 6.20. Summary of JavaScript Statements Chapter 7. Functions Section 7.1. Defining and Invoking Functions ...

    javascript完全学习手册1 源码

    13.3.2 触发onError事件处理异常 375 13.3.3 使用try...catch语句处理 异常 377 13.3.4 Error对象 379 13.3.5 使用throw语句 380 13.4 JavaScript调试技巧 381 13.4.1 使用alert()语句 382 13.4.2 使用write()语句 ...

    JavaScript详解(第2版)

     13.6.8 onError事件   13.7 event对象   13.7.1 捕获和冒泡(滴漏和冒泡)   13.7.2 事件对象属性   13.7.3 使用事件对象属性   13.7.4 将事件传递给JavaScript函数   13.7.5 鼠标坐标   13.7....

    Javascript数组操作高级心得整理

     onerror事件功能 14  语法 14  例子 14 11. 特殊字符与注意点 15 (1) 特殊字符 15 (2) 注意点 15  JavaScript 对大小写敏感 15  空格 15  换行 15 第二章JavaScript对象 1. JavaScript对象简介 15 (1) ...

    javascript完全学习手册2 源码

    13.3.3 使用trycatch语句处理异常 13.3.4 Error对象 13.3.5 使用throw语句 13.4 JavaScript调试技法 13.4.1 使用alen()语句 13.4.2 使用write()语句 13.4.3 抛出自定义异常消息 第4篇 JaVflscript特效...

    Ajax完全自学手册(源代码).rar

    Test4Onerror.htm onerror错误处理 Test4Onerror1.htm onerror错误处理 Test4TryCatch1.htm try catch 语法结构 Test4Throw.htm throw关键字显式抛出异常 throwException.htm 抛出自定义错误 第7章 ...

    Ajax完全自学手册(PPT)

    Test4Onerror.htm onerror错误处理 Test4Onerror1.htm onerror错误处理 Test4TryCatch1.htm try catch 语法结构 Test4Throw.htm throw关键字显式抛出异常 throwException.htm 抛出自定义错误 第7章 ...

    JavaScript集锦

    (5)使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。 - 11 - (6)你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。 - 12 - (7)JavaScript 指导方针 - 13 - JavaScript ...

    Ajax完全自学手册PPT和源代码(ptt格式)

    Test4Onerror.htm onerror错误处理 Test4Onerror1.htm onerror错误处理 Test4TryCatch1.htm try catch 语法结构 Test4Throw.htm throw关键字显式抛出异常 throwException.htm 抛出自定义错误 第7章 JavaScript中的...

    【JavaScript源代码】express异步函数异常捕获示例详解.docx

     在express中时使用 Async/await 编写异步代码时,每个 async 函数都要包裹在try/catch中,代码量多了看着冗余不优雅,express又不像koa的异步机制可以订阅全局的error事件,为了解决这个问题,需要写个捕获异步...

    javascript [removed]事件学习新收获

    在捕获js错误时,我们通常使用try{}catch(e){}的方式,然后通过e.errorMessage等方式获取错误信息然后报告错误。但对于onerror事件可能很少问津,我们是否思考过如何报告错误所在的行号?如果想过这个是否也被这个...

    javascript文档

    catch 语句 包含在 try 语句块中的代码发生错误时执行的语句。 ceil 方法 返回大于或等于其数值参数的最小整数。 charAt 方法 返回位于指定索引位置的字符。 charCodeAt 方法 返回指定字符的 Unicode 编码。 ...

    微软JavaScript手册

    catch 语句 包含在 try 语句块中的代码发生错误时执行的语句。 ceil 方法 返回大于或等于其数值参数的最小整数。 charAt 方法 返回位于指定索引位置的字符。 charCodeAt 方法 返回指定字符的 Unicode 编码。 ...

    spring_MVC源码

    弃用了struts,用spring mvc框架做了几个项目,感觉都不错,而且使用了注解方式,可以省掉一大堆配置文件。本文主要介绍使用注解方式配置的spring mvc,之前写的spring3.0 mvc和rest小例子没有介绍到数据层的内容,...

Global site tag (gtag.js) - Google Analytics