改变图像标签的原型？

Question

我正在尝试编写一个可以执行以下操作的库.

当库包含在头部时,它会改变HTMLImageElement原型,以便用户碰巧在HTML中使用的任何图像标记或者他们在javascript中动态创建的图像标记将具有由我的库定义的默认的onerror函数.

这样做的结果是,如果任何用户图像无法加载,因为他们指向一个坏URL,我的库将以优雅的方式处理它.

我正在尝试以下作为实验,

var img = document.createElement('img');
  img.__proto__.onerror = function() {
    alert('hi');
  };
  document.body.innerHTML = '<img id="foo" src="bar.png"/>'

文件bar.png不存在但不起作用.

但是,如果我只是做类似的事情

  document.body.innerHTML = '<img id="foo" src="bar.png" ' +
    'onerror="this.src = MODIT.getImage(\'blackTile\').src;"/>';

工作正常.这里MODIT.getImage()是一个返回图像元素的函数.你可以在这里玩这个代码:https://mod.it/ciR_BxqJ/

我正在尝试做什么？或者有没有办法全局捕获所有403 GET错误并以某种方式使用javascript处理它们？

谢谢!

Answer 1

window.addEventListener("error", function(e) {
    if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
        alert( 'Bad image src: ' + e.target.src);
    }
}, true);

请参阅:http://jsfiddle.net/Vudsm/