拦截image.src赋值

Question

我需要从单页应用程序客户端重新映射多个资源的请求。

我可以通过这种方式拦截通过fetch加载的资源的请求

const {fetch: originalFetch} = window;

window.fetch = async (...args) => 
{
 let [resource, config ] = args;

 resource = resource.replace("www.somewhere", "www.elsewhere");
 const response = await originalFetch(resource, config);
 
 return response;
};

但是，有十亿段代码，其中图像（以及与此相关的视频和音频文件）是通过简单的分配来加载的

var image = new Image();

image.onload = 
function()
{
 // something happens here
}

image.src = "www.somewhere.com/hello.jpg";

有什么方法可以在处理实际请求之前拦截分配并对 src 进行操作吗？

Answer 1

你可以对 setter 进行猴子补丁：

var image = new Image();

const {set, ...def} = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
Object.assign(def, {
  set(val){
    console.log(val);
    set.call(this, val);
  }
});

Object.defineProperty(Image.prototype, 'src', def);

image.onload = 
function()
{
 // something happens here
}

image.src = "www.somewhere.com/hello.jpg";