覆蓋 HTML img src 分配

Question

我正在嘗試通過重新定義 Image/HTMLImage object 的屬性來動態覆蓋所有 IMG url 分配。它正確地攔截了分配，但是新的 URL 不起作用並且它似乎使 img 無法正常工作。

這可能與 defineProperty 的其他東西有關（例如突變觀察者）嗎？

（pps 對於我的某些用例，分配 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 分配

問題描述

1 個解決方案

解決方案1
0 已采納 2022-05-18 08:44:02

覆蓋 HTML img src 分配

問題描述

1 個解決方案

解決方案1 0 已采納 2022-05-18 08:44:02

解決方案1
0 已采納 2022-05-18 08:44:02