測試代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<script>
alert('first');
function alertError(thisObject){
var outerHTML = thisObject.outerHTML; // 這個就是出錯的對象的标簽,這樣資源加載失敗是不是就可以記錄通過一些手段記錄到伺服器了!!!
alert('script-error');
}
</script>
<body >
<img class="currentImg" id="currentImg" οnerrοr="alert('img-error')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523532560732&di=f4440f7230c3ac36bd87c4cb0534d56d&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg"/>
</body>
<script οnerrοr="javascript:alertError(this)" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
window.onload = function(e){
alert('global onload');
}
</script>
</html>
結果(測試結果不一緻時請清除浏覽器緩存):
1、輸出依次是 “first”、“global onload”,說明加載第一個<script>标簽後其中的代碼得到執行,這就是為什麼alertError函數必須寫在代碼開頭!
2、若将<script>中src改成錯誤的src(或故意斷網),則alertError函數會被觸發,實參this指代的是該标簽對應的DOM
3、<img>标簽同理,利用this對象可以把該标簽中的onerror函數改為 οnerrοr="javascript:this.src='./backup.img'",這樣資源圖檔找不到時就有了備份圖檔。
測試環境:Chrome浏覽器