覆盖 HTML img src 分配

Question

我试图通过重新定义 Image/HTMLImage 对象的属性来动态覆盖所有 IMG url 分配。它正确地拦截了分配，但新的 URL 不起作用，而且它似乎完全破坏了 img 正常工作的能力。

这是否可能与定义属性的其他东西（例如变异观察者）有关？

(p.p.s。对于我的特定用例，分配 this.srcset=e; 效果很好但很丑)

<html>
<body>
<script>
if(!window.once) {
window.once = 1;

Object.defineProperty( 
    Image.prototype,'src',{configurable: true
    , get: function() { 
      console.log(this.__src);
    return this.__src; }

    , set: function(e) {
        if(e.includes('replacemask')) {
         e='rep.jpg';
    }
    this.__src=e; console.info('aaa:', e) } });

}       

var x = new Image;
x.src="-.jpg";

document.body.append(x);

</script>
</body>
</html>

Answer 1

您需要先提取“原始”setter 和 getter，然后自己调用它们：

// get the original descriptor
const desc = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, "src");
Object.defineProperty(
  HTMLImageElement.prototype, "src", {
    ...desc,
    get: function() {
      console.log(this.__src);
      // call the original getter
      return desc.get.call(this);
    },
    set: function(e) {
      if (e.includes('replacemask')) {
        e = e.replace('replacemask', 'demonstration_1.png');
      }
      // get the original setter
      desc.set.call(this, e);
      console.info('aaa:', e)
    }
  });

var x = new Image;
x.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_replacemask";
document.body.append(x);

但是请注意，这不是更新 HTMLImageElement 的当前源的唯一方法。您有明显的 setAttribute，但也有不太明显的 srcset 和 <picture><source> 情况。

覆盖 HTML img src 分配

Overriding HTML img src assignments

javascript

image