欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年01月27日 13:13:48   投稿:mdxy-dxy  
目前在做window.onerror時上報js錯誤信息的事,整理下相關(guān)資料,需要的朋友可以參考下

onerror語法使用

onerror 默認有三個入?yún)ⅲ?/p>

•msg: 錯誤信息
•url:錯誤所在文件
•line: 錯誤所在代碼行,整型
window.onerror = function(msg, url, line){ // some code };
對于 <body onerror=”some code”>形式的,可以通過arguments[0]、arguments[1]、arguments[2]依次獲取參數(shù)。

js中我們最常用的就是js容錯

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

基本特性
可以通過設(shè)置returnValue=true,或直接return true來阻止瀏覽器顯示錯誤信息。但不會阻止script debuggers彈出的調(diào)試框。
只有運行錯誤才會觸發(fā)onerror,語法錯誤不會觸發(fā)。

以下三種方式可以引發(fā)onerror:

•運行時錯誤,例如無效的對象引用或安全限制
•下載錯誤,如圖片
•在IE9中,獲取多媒體數(shù)據(jù)失敗也會引發(fā)
<script> 標簽不支持onerror。

定義在 <body> 標簽上的onerror屬性相當于window.onerror (經(jīng)測試,F(xiàn)irefox、Opera支持,IE9、chrome無反應(yīng))。

瀏覽器兼容性

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類瀏覽器會篡改原始的錯誤信息,導(dǎo)致最后onerror獲取到的三個入?yún)椋?/p>

復(fù)制代碼 代碼如下:

“Script error.”,”", 0

例如http://a.com/index.html,引入了http://b.com/g.js,如果g.js出錯,最終傳遞到window.onerror的信息會被篡改。

瀏覽器之所以做這樣的處理,是考慮到兩個特性:

•<script> 能執(zhí)行非同源下的第三方j(luò)s文件。
•<script> 元素會忽略加載的文件的MIME類型,而當作腳本來執(zhí)行。
在攻擊場景中,惡意頁面引入了正常頁面的js文件,js文件會自動執(zhí)行,若發(fā)生異常觸發(fā)的報錯信息,可能會泄漏某些敏感數(shù)據(jù)。這些信息最終會被惡意頁面的window.onerror處理。

經(jīng)測試,存在此特性的瀏覽器(當前最新版)有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屬性)。服務(wù)器在接受到請求時,在HTTP Header里增加一個授權(quán)字段(值可以是具體的某個域名):

Access-Control-Allow-Origin: *

瀏覽器檢測到此js已經(jīng)授權(quán)此頁面所在域名,則不用再篡改由此js傳遞到window.onerror的錯誤信息了。

經(jīng)測試,此方案尚未被瀏覽器實現(xiàn)。
已經(jīng)在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函數(shù)的三個參數(shù)用于確定錯誤確切的信息,代表的意思依次為:錯誤信息;發(fā)生錯誤的文件;發(fā)生錯誤的行號。

示例:

<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代碼頓然發(fā)現(xiàn)了onerror事件,要說onerror這個時間也是n久以前就知道了,但對于其所帶有的三個參數(shù)和其特殊性質(zhì)卻一直沒有去了解過。經(jīng)過自己的研究測試,對onerror事件有了一些新的認識和了解。在頁面沒有錯誤時,window.onerror事件是不存在的,也就是null(廢話!沒出錯如果onerror出現(xiàn)還正常嗎?)我們一般通過函數(shù)名傳遞的方式(引用的方式)將要執(zhí)行的操作函數(shù)傳遞給onerror事件,如window.onerror=reportError;window.onerror=function(){alert('error')},但我們可能不知道該事件觸發(fā)時還帶有三個默認的參數(shù),他們分別是錯誤信息,錯誤頁面的url和錯誤行號。要知道這個可是事件,就如onclick和onmouseover等事件一樣,但它是有參數(shù)。我們可以這樣測試。

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

首先將testError方法綁定給onerror事件,然后在test方法里觸發(fā)一個錯誤,在IE中執(zhí)行時我們發(fā)現(xiàn)如下提示:
--------------------------- Microsoft Internet Explorer ---------------------------
參數(shù)個數(shù):3個
參數(shù)1:'error' 未定義
參數(shù)2:file://E:/yanwei/test/testError.html
參數(shù)3:14
--------------------------- 確定 ---------------------------
可以發(fā)現(xiàn),當出錯時函數(shù)testError捕獲到了三個參數(shù)。通過將函數(shù)綁定到onerror事件就可以在頁面出錯時捕獲以上三個參數(shù)。
在測試中還發(fā)現(xiàn)以下一些問題:
1、通過在函數(shù)末尾加上return true,可以在函數(shù)出錯時不會彈出系統(tǒng)的錯誤信息(IE)。
2、如果頁面出現(xiàn)多次錯誤,只捕獲第一次錯誤并進行處理然后終止后面程序的執(zhí)行。
3、onerror事件并不能捕獲所有的錯誤,只能捕獲函數(shù)外或函數(shù)內(nèi)錯誤(??這個是什么意思,可不是開玩笑呢),如 adasdf; function test(){ aaaa; } 可以捕獲到adasdf未定義的錯誤 function test(){ aaaa; } 可以捕獲到aaaa未定義的錯誤,而對于functiona test(){}或function test()dd{} 的錯誤卻不能捕獲而會直接彈出系統(tǒng)錯誤信息。
4、onerror在IE和FF等瀏覽器執(zhí)行方式是一樣的,而且都包含這三個參數(shù)。

相關(guān)文章

  • webpack配置之后端渲染詳解

    webpack配置之后端渲染詳解

    本篇文章主要介紹了webpack配置之后端渲染詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • javascript實現(xiàn)的HashMap類代碼

    javascript實現(xiàn)的HashMap類代碼

    這篇文章主要介紹了javascript實現(xiàn)的HashMap類代碼,實現(xiàn)了添加、獲取、刪除、查詢key和value功能,需要的朋友可以參考下
    2014-06-06
  • 詳解javascript實現(xiàn)瀑布流列式布局

    詳解javascript實現(xiàn)瀑布流列式布局

    這篇文章主要介紹了javascript實現(xiàn)瀑布流的兩種布局方式,一是絕對式布局、二是列式布局,詳細介紹了這兩種布局方式的原理,本文重點介紹列式布局,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 短視頻(douyin)去水印工具的實現(xiàn)代碼

    短視頻(douyin)去水印工具的實現(xiàn)代碼

    這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實現(xiàn)的,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • uniapp基礎(chǔ)知識點掌握以及面試題整理

    uniapp基礎(chǔ)知識點掌握以及面試題整理

    uni-app是一個使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)知識點掌握以及面試題整理的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • 淺析JavaScript 函數(shù)防抖和節(jié)流

    淺析JavaScript 函數(shù)防抖和節(jié)流

    這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料,文中講解非常細致,幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • js父頁面與子頁面不同時顯示的方法

    js父頁面與子頁面不同時顯示的方法

    這篇文章主要介紹了js父頁面與子頁面不同時顯示的方法,打開一個頁面后,父頁面DISABLE,在子頁面關(guān)閉后,父頁面ENABLE,是比較實用的技巧,需要的朋友可以參考下
    2014-10-10
  • 仿豆瓣分頁原型(Javascript版)

    仿豆瓣分頁原型(Javascript版)

    仿豆瓣分頁原型(Javascript版)...
    2007-04-04
  • JavaScript實現(xiàn)像素鳥小游戲的詳細流程

    JavaScript實現(xiàn)像素鳥小游戲的詳細流程

    最近通過javascript這門語言,然后結(jié)合html的來寫一個簡單的小游戲 ,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)像素鳥小游戲的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • webpack3里使用uglifyjs壓縮js時打包報錯的解決

    webpack3里使用uglifyjs壓縮js時打包報錯的解決

    這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時打包報錯的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12

最新評論