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" onerror="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 onerror="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函数改为 onerror="javascript:this.src='./backup.img'",这样资源图片找不到时就有了备份图片。

测试环境：Chrome浏览器

HTML资源标签onerror属性

猜你喜欢