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文件中的错误，Webkit和Mozilla类浏览器会篡改原始的错误信息，导致最后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等浏览器执行方式是一样的，而且都包含这三个参数。
相关推荐
-
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的社区则较为活跃.