版权声明:如需转载请参阅《转载说明》 https://blog.csdn.net/automation13/article/details/79920692
测试代码:
<!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浏览器