javascript - 改变图像标签的原型(prototype)？

Question

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

当库包含在头部时，它会改变 HTMLImageElement 原型(prototype)，这样用户碰巧在他们的 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/