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


Posted in Javascript onJanuary 27, 2016

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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Node学习记录之cluster模块
May 31 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
用window.onerror捕获并上报Js错误的方法
Jan 27 #Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 #Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 #Javascript
再谈JavaScript异步编程
Jan 27 #Javascript
简单介绍jsonp 使用小结
Jan 27 #Javascript
理解javascript异步编程
Jan 27 #Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 #Javascript
You might like
文章推荐系统(三)
2006/10/09 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php实现的简单检验登陆类
2015/06/18 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
解决python爬虫中有中文的url问题
2018/05/11 Python
Numpy之random函数使用学习
2019/01/29 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
教师绩效考核方案
2014/01/21 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
车辆挂靠协议书
2016/03/23 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android