차단 자바 스크립트 HTMLImageElement는 생성자

Question

나는 HTMLImageElement의 이미지() 생성자를 차단하려고합니다.

무엇이 놓치나요?

Answer 1

Image 및 HTMLImageElement의 생성자는 동일한 기능이 아닙니다. 후자의 신뢰할 수있는 크로스 브라우저를 재정의 할 수 없습니다.

서문 :Image는 HTML 파서에 의해 img 요소 또는 document.createElement 전화의 생성을 차단하지 않습니다 재정의. 내가 아는 한, 그건 불가능한 크로스 브라우저입니다. 당신은 수 있습니다 do는 mutation observer을 통해 문서에 추가 된대로 모든 이미지를 잡습니다. 그러나 그것은 추가되지 않고 생성되지 않은 시점에 잡기 만합니다.

그러나 : 당신이, Image의 구체적 재정의, 그래서를 교체하기 전에 Image의 원래 값을, 그 사용하려는 말했다했습니다.

예 : 당신을위한 옵션의 경우

var originalImage = Image; 
 
Image = function(width, height) { 
 
    var result; 
 
    console.log("Intercepted"); 
 
    switch (arguments.length) { 
 
     case 0: 
 
     result = new originalImage(); 
 
     break; 
 
     case 1: 
 
     result = new originalImage(width); 
 
     break; 
 
     default: 
 
     result = new originalImage(width, height); 
 
     break; 
 
    } 
 
    return result; 
 
}; 
 

 
var img = new Image(); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img); 
 
img = new Image(32, 20); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img);

ES2015에서

는 :

const originalImage = Image; 
 
Image = function(...args) { 
 
    console.log("Intercepted"); 
 
    return new originalImage(...args); 
 
}; 
 

 
let img = new Image(); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img); 
 
img = new Image(32, 20); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img);