window.onerror()的用法与实例分析

onerror语法使用

onerror 默认有三个入参:

•msg: 错误信息
•url:错误所在文件
•line: 错误所在代码行,整型
window.onerror = function(msg, url, line){ // some code };
对于 <body onerror=”some code”>形式的,可以通过arguments[0]、arguments[1]、arguments[2]依次获取参数。

js中我们最常用的就是js容错

window.onerror=function(){return true;}

基本特性
可以通过设置returnValue=true,或直接return true来阻止浏览器显示错误信息。但不会阻止script debuggers弹出的调试框。
只有运行错误才会触发onerror,语法错误不会触发。

以下三种方式可以引发onerror:

•运行时错误,例如无效的对象引用或安全限制
•下载错误,如图片
•在IE9中,获取多媒体数据失败也会引发
<script> 标签不支持onerror。

定义在 <body> 标签上的onerror属性相当于window.onerror (经测试,Firefox、Opera支持,IE9、chrome无反应)。

浏览器兼容性

QuirksMode列出的各浏览器对onError的支持情况

•Chrome 13+
•Firefox 6.1+
•Internet Explorer 5.5+
•Safari 5.1+
•Opera 11.61+ (QuirksMode 测试到11.51尚不支持,我手头上的11.61已支持)
除window对象外,支持 onerror 的元素:

•<img> 全支持
•<script> IE9/IE10/safari 5.1+/chrome 13+ 支持
<css> 和 <iframe> 不支持onerror。

问题与解决方案

对于引用外部js文件中的错误,WebkitMozilla类浏览器会篡改原始的错误信息,导致最后onerror获取到的三个入参为:

代码如下:

“Script error.”,”", 0

例如http://a.com/index.html,引入了http://b.com/g.js,如果g.js出错,最终传递到window.onerror的信息会被篡改。

浏览器之所以做这样的处理,是考虑到两个特性:

•<script> 能执行非同源下的第三方js文件。
•<script> 元素会忽略加载的文件的MIME类型,而当作脚本来执行。
在攻击场景中,恶意页面引入了正常页面的js文件,js文件会自动执行,若发生异常触发的报错信息,可能会泄漏某些敏感数据。这些信息最终会被恶意页面的window.onerror处理。

经测试,存在此特性的浏览器(当前最新版)有Firefox、Chrome、Safari、Opera。

Adam Barth(work on the security of the Chrome browser at Google)建议的解决方案是使用CORS (Cross-Origin Resource Sharing)。

简言之,当在页面中 <script> 引入外部js文件时,增加一个属性crossorigin(类似于<img> 的CROS属性)。服务器在接受到请求时,在HTTP Header里增加一个授权字段(值可以是具体的某个域名):

Access-Control-Allow-Origin: *

浏览器检测到此js已经授权此页面所在域名,则不用再篡改由此js传递到window.onerror的错误信息了。

经测试,此方案尚未被浏览器实现。
已经在Chrome、Firefox的较新版本中支持。

其他参考资料

Internet Explorer http://msdn.microsoft.com/en-us/library/cc197053.aspx

Mozilla Firefox https://developer.mozilla.org/en/DOM/window.onerror

Opera http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/

Wiki http://www.w3.org/wiki/DOM/window.onerror

syntax errors and runtime errors http://www.htmlgoodies.com/primers/jsp/article.php/3610081/Javascript-Basics-Part-11.htm

window.下面是一些实例大家可以参考下:

onerror = function(sMessage,sUrl,sLine){};

onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:错误信息;发生错误的文件;发生错误的行号。

示例:

<SCRIPT>
window.onerror=fnErrorTrap;
function fnErrorTrap(sMsg,sUrl,sLine){
oErrorLog.innerHTML="<b>An error was thrown and caught.</b><p>";
oErrorLog.innerHTML+="Error: " + sMsg + "<br>";
oErrorLog.innerHTML+="Line: " + sLine + "<br>";
oErrorLog.innerHTML+="URL: " + sUrl + "<br>";
return false;
}
function fnThrow(){
eval(oErrorCode.value);
}
</SCRIPT>
<INPUT TYPE="text" ID=oErrorCode VALUE="someObject.someProperty=true;">
<INPUT TYPE="button" VALUE="Throw Error" onclick="fnThrow()">
<P>
<DIV ID="oErrorLog">
</DIV>

上面示例的方法很值得借鉴。
在捕获js错误时,我们通常使用try{}catch(e){}的方式,然后通过e.errorMessage等方式获取错误信息然后报告错误。但对于onerror事件可能很少问津,我们是否思考过如何报告错误所在的行号?如果想过这个是否也被这个问题所困扰过,是否认为在js里不可能捕获错误的行号呢?其实本人就遇到上述的几个问题,今日读某人写的一段js代码顿然发现了onerror事件,要说onerror这个时间也是n久以前就知道了,但对于其所带有的三个参数和其特殊性质却一直没有去了解过。经过自己的研究测试,对onerror事件有了一些新的认识和了解。在页面没有错误时,window.onerror事件是不存在的,也就是null(废话!没出错如果onerror出现还正常吗?)我们一般通过函数名传递的方式(引用的方式)将要执行的操作函数传递给onerror事件,如window.onerror=reportError;window.onerror=function(){alert('error')},但我们可能不知道该事件触发时还带有三个默认的参数,他们分别是错误信息,错误页面的url和错误行号。要知道这个可是事件,就如onclick和onmouseover等事件一样,但它是有参数。我们可以这样测试。

<script type="text/javascript">
  window.onerror=testError;
  function testError(){
  arglen=arguments.length;
  var errorMsg="参数个数:"+arglen+"个";
  for(var i=0;i<arglen;i++){
  errorMsg+="/n参数"+(i+1)+":"+arguments[i];
}
  alert(errorMsg);
  window.onerror=null;
  return true;
}
function test(){
  error
}
test()
</script> 

首先将testError方法绑定给onerror事件,然后在test方法里触发一个错误,在IE中执行时我们发现如下提示:
--------------------------- Microsoft Internet Explorer ---------------------------
参数个数:3个
参数1:'error' 未定义
参数2:file://E:/yanwei/test/testError.html
参数3:14
--------------------------- 确定 ---------------------------
可以发现,当出错时函数testError捕获到了三个参数。通过将函数绑定到onerror事件就可以在页面出错时捕获以上三个参数。
在测试中还发现以下一些问题:
1、通过在函数末尾加上return true,可以在函数出错时不会弹出系统的错误信息(IE)。
2、如果页面出现多次错误,只捕获第一次错误并进行处理然后终止后面程序的执行。
3、onerror事件并不能捕获所有的错误,只能捕获函数外或函数内错误(??这个是什么意思,可不是开玩笑呢),如 adasdf; function test(){ aaaa; } 可以捕获到adasdf未定义的错误 function test(){ aaaa; } 可以捕获到aaaa未定义的错误,而对于functiona test(){}或function test()dd{} 的错误却不能捕获而会直接弹出系统错误信息。
4、onerror在IE和FF等浏览器执行方式是一样的,而且都包含这三个参数。

(0)

相关推荐

  • javascript window.onerror事件学习新收获

    在捕获js错误时,我们通常使用try{}catch(e){}的方式,然后通过e.errorMessage等方式获取错误信息然后报告错误.但对于onerror事件可能很少问津,我们是否思考过如何报告错误所在的行号?如果想过这个是否也被这个问题所困扰过,是否认为在js里不可能捕获错误的行号呢?其实本人就遇到上述的几个问题,今日读某人写的一段js代码顿然发现了onerror事件,要说onerror这个时间也是n久以前就知道了,但对于其所带有的三个参数和其特殊性质却一直没有去了解过.经过自己的研究测试,

  • 解析img图片没找到onerror事件 Stack overflow at line: 0

    打开网页时提示 Stack overflow at line: 0.我做了截图如下: 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片.也就是说图片存

  • 用window.onerror捕获并上报Js错误的方法

    前两天有个2048游戏的用户反馈说,打开游戏后不能玩儿,只有一个游戏面板,数字无法初始化,更无法移动,设备为iPhone 4S.iOS 5.1.尝试从微信调起Safari打开,依然不好使.由于游戏中运用了比较多的HTML5特性,所以粗略估计是有JS报错导致.不过这样的信息该如何捕获到呢?当然是传说中的window.onerror. 从W3C找到关于window.onerror的方法体介绍: 这个意思,基本可以就是说,window.onerror方法,我们可以写成: /** * @param {S

  • js注意img图片的onerror事件的分析

    经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片.也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif.但问题来了,如果 no

  • JS对img标签进行优化使用onerror显示默认图像

    对于网站图像的不显示有很多原因,网络问题,文件本身问题,文件URL问题等,而当图像加载失败时会触发onerror这个事件,我们利用这点,可以有效的避免图像加载失败的尴尬! js代码 复制代码 代码如下: //图像加载出错时的处理 function errorImg(img) { img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg"; img.

  • JavaScript中的onerror事件概述及使用

    1.Window.onerror事件 onerror事件用来协助处理页面中的JavaScript错误.当页面上出现异常时,error事件便在window对象上触发.例如: 在这种情况下,浏览器会显示错误信息: . 如果不希望浏览器在默认对话框中显示出错消息,让onerror方法返回true即可. 此外,onerror方法还提供了三个参数用来确定错误确切的信息,分别是: 1)message:一个字符串,声明了出现的错误的信息(不同的浏览器中返回的消息内容略有差异). 2)url:一个字符串,声明了

  • 利用图片的 onerror 事件载入默认图片

    载入默认图片 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 上面的代码在firefox有作用,ie7下无效.下面是从chinaz弄来的代码.并且一直在用的,经过测试,ie7,firefox3.5经过测试 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • img标签中onerror用法

    今日见一TX在HTML中写了以下代码<img src="xxx.jpg" onerror="this.src='xxx.jpg'" /> 哎! 在FF上面还可以 但是在IE上面就不的,因为B/S结构有很多因素引发onerror,此处在发生onerror的时候给当前图片重新制定个地址 可是这会引起再因网络原因或其他原因使图片不能正常加载的话 这样就是再次调用onerror,基于微软的一套核心的浏览器就会认为这是死循环 然后就会报 stack overflo

  • window.onerror()的用法与实例分析

    onerror语法使用 onerror 默认有三个入参: •msg: 错误信息 •url:错误所在文件 •line: 错误所在代码行,整型 window.onerror = function(msg, url, line){ // some code }; 对于 <body onerror="some code">形式的,可以通过arguments[0].arguments[1].arguments[2]依次获取参数. js中我们最常用的就是js容错 window.oner

  • python中lambda与def用法对比实例分析

    本文实例对比分析了python中lambda与def的用法.分享给大家供大家参考.具体分析如下: 1.lambda用来创建匿名函数,不同于def(def创建的函数都是有名字的). 2.lambda不会将结果赋给一个标识符,而def会将函数结果赋给一个标识符. 3.lambda是一个表达式,而def是一个语句 示例程序: >>> f1 = lambda x,y,z: x*2+y+z # lambda带有多个参数 >>> print f1(3,2,1) 9 >>

  • php设计模式之工厂模式用法经典实例分析

    本文实例讲述了php设计模式之工厂模式用法.分享给大家供大家参考,具体如下: <?php /*** * @desc 工厂模式 * ***/ interface DB{ /* * @desc 接口类不体现具体实现,只是为了规范一套规则 * **/ public function conn(); public function add(); public function delete(); public function update(); public function select(); pu

  • JavaScript中break、continue和return的用法区别实例分析

    本文实例讲述了JavaScript中break.continue和return的用法区别.分享给大家供大家参考,具体如下: break 停止了这个for循环,跳出循环来继续执行fn函数里之后的语句  function fn() { for(var i = 0; i < 5; i++) { if(i == 3) { break; } console.log(i); } console.log("ha") } fn();//0 1 2 ha continue 只是停止了当前循环,继续

  • Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)

    <script>        if(confirm("确定要进行此操作吗?"))        {          alert("把确定的事件写到这里吧!");        }        else         {           alert("如果取消,就写一个返回事件吧!");        }</script> jQuery.ligerDialog.confirm('确定删除吗?', function

  • js中this的用法实例分析

    本文实例分析了js中this的用法.分享给大家供大家参考.具体分析如下: 实例1:第一种调用this的方法--以函数形式调用.它代表全局对象window 复制代码 代码如下: <script type="text/javascript"> function t(){  alert(this);//这里this表示window对象. } t(); </script> 实例2:第二种调用this的方法--以对象属性的形式调用.它代表该对象.实例中onclick为p元

  • JavaScript中this的用法实例分析

    本文实例分析了JavaScript中this的用法.分享给大家供大家参考,具体如下: 一."this"公理 this关键字永远都指向函数(方法)的所有者: function fn1(){ this }; fn1(); //this=>window oDiv.onclick=fn1; //this=>oDiv oDiv.onclick=function(){ this //this=>oDiv fn1(); //this=>window } <div onc

  • JavaScript事件委托原理与用法实例分析

    本文实例分析了JavaScript事件委托原理与用法.分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道.所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题. 1. js中的事件流 在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获. ① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上

  • Symfony2开发之控制器用法实例分析

    本文实例分析了Symfony2开发之控制器用法.分享给大家供大家参考,具体如下: 控制器是PHP函数,通过它,你可以根据HTTP请求创建任务信息,并且构建和返回HTTP响应.响应可以是HTML页面.XML文档.序列化的JSON数组.图片.重定向.404错误甚至是你可以想到的一切.控制器中包含了你应用程序需要创建响应的抽象逻辑. 接收请求,返回响应的基本生命周期 1.每个请求都被单个前端控制器(如app.php或index.php)文件处理,前端控制器负责引导框架: 2.路由查看并匹配请求信息,并

  • Jackson的用法实例分析

    通俗的来说,Jackson是一个 Java 用来处理 JSON 格式数据的类库,其性能非常好.本文就来针对Jackson的用法做一个较为详细的实例分析.具体如下: 一.简介 Jackson具有比较高的序列化和反序列化效率,据测试,无论是哪种形式的转换,Jackson > Gson > Json-lib,而且Jackson的处理能力甚至高出Json-lib近10倍左右,且正确性也十分高.相比之下,Json-lib似乎已经停止更新,最新的版本也是基于JDK15,而Jackson的社区则较为活跃.

随机推荐