天天看點

HTML資源标簽onerror屬性

測試代碼:

<!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浏覽器