window.onerror()的用法與實例分析_javascript技巧

onerror語法使用

onerror 預設有三個入參：

•msg: 錯誤訊息
•url：錯誤所在檔案
•line： 錯誤所在程式碼行，整型
window.onerror = function(msg, url, line){ // 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。 </script>

定義在

標籤上的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 的元素：

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

問題與解決方案

對於引用外部js檔案中的錯誤，Webkit和Mozilla類別瀏覽器會竄改原始的錯誤訊息，導致最後onerror取得到的三個入參為：

複製程式碼 程式碼如下:

“Script error.”,”", 0

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

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

•3f1c4e4b6b16bbbd69b2ee476dc4f83a 能执行非同源下的第三方js文件。
•3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素会忽略加载的文件的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)。

简言之，当在页面中 3f1c4e4b6b16bbbd69b2ee476dc4f83a 引入外部js文件时，增加一个属性crossorigin（类似于a1f02c36ba31691bcfe87b2722de723b 的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等瀏覽器執行方式是一樣的，而且都包含這三個參數。