<img> को डीओएम

Question

में सम्मिलित करना/अवरोध करना हम इस विश्लेषिकी कंपनी द्वारा प्रदान की गई एक तृतीय-पक्ष विश्लेषिकी रिपोर्टिंग स्क्रिप्ट का उपयोग कर रहे हैं। यह छवि के यूआरएल में डेटा रिपोर्टिंग के साथ डीओएम में 1x1 पिक्सेल छवि जोड़ता है।

क्या मेरे लिए डीओएम की निगरानी करने और <img> तत्व को अवरुद्ध करने और ब्राउज़र से छवि अनुरोध करने से पहले "src" विशेषता को बदलने का कोई तरीका है?

ऐसा करने के लिए वास्तव में एक अजीब चीज की तरह लगता है, मुझे पता है, लेकिन एक ऐसी सुविधा है जिसे हम इस रिपोर्टिंग स्क्रिप्ट पर हैक करना चाहते हैं (स्क्रिप्ट अस्पष्ट है)।

Answer 1

गैर-आईई ब्राउज़र में, आप DOMNodeInserted ईवेंट का उपयोग कर एक डोम नोड के सम्मिलन का पता लगा सकते हैं। मुझे नहीं पता कि ब्राउज़र को ईवेंट निकाल दिए जाने तक HTTP अनुरोध किया जाएगा या नहीं; यह एक त्वरित परीक्षण से फ़ायरफ़ॉक्स में नहीं प्रतीत होता है। चूंकि यह आईई में काम नहीं करता है, यह वैसे भी एक स्वीकार्य समाधान नहीं हो सकता है। आदम सुझाव पर

document.body.addEventListener("DOMNodeInserted", function(evt) { 
    var node = evt.target; 
    if (node.nodeType == 1 && node.tagName == "IMG") { 
     node.src = "http://www.gravatar.com/avatar/be21766f09e0e5fd3a2f8cc721ceba2e?s=32&d=identicon&r=PG"; // Your gravatar 
    } 
}, false); 

Answer 2

भवन:

$(document).ready(function() { 
    $("img[src='http://example.com/example.gif']").attr('src','http://example.com/new_src.gif'); 
}); 

Answer 3

इस एक जाना दे। मैं इसे किया जाएगा कि कैसे उपयोगी नहीं पता, लेकिन मैं फेरबदल की तरह महसूस किया और यह कुछ हद तक परिदृश्य जिससे तृतीय पक्ष उद्देश्यपूर्ण देरी को शामिल किया गया के लिए खातों:

$(document).ready(function() { 
// match an image with specific dimension, return it 
function imgNinja() { 
    var $img = $("img").filter(function() { 
     return ($(this).height() == 1 && $(this).width() == 1); 
    }); 
    return $img; 
} 

// periodically execute this to check for matches 
function keepSeeking() { 
    $img = imgNinja(); 
    if($img.length) { 
     alert('found it'); 
     clearInterval(i); 
     // do something with image 
    } 
} 

// insert a fake into the DOM at a bit of an interval 
function addNastyImage() { 
    var $invader = $('<img src="foo.jpg" height="1px" width="1px"/>'); 
    $('html').append($invader); 
} 


setTimeout(addNastyImage, 5000); 
var i = setInterval(keepSeeking, 1000); 
}); 

डेमो: http://jsfiddle.net/NyEdE/3/

Answer 4

तीसरे हैं दस्तावेज़ स्क्रिप्ट दस्तावेज़ में तत्व जोड़ने के लिए एक विधि (जैसे .appendChild) का उपयोग करता है, तो संभवतः आप अपने ऑब्जेक्ट के साथ प्रासंगिक ऑब्जेक्ट की उस विधि को प्रतिस्थापित करके ऐसा कर सकते हैं।

इससे सभी ब्राउज़रों में काम करने का लाभ होगा, और मुझे लगता है कि आप केवल एक HTTP अनुरोध उत्पन्न करेंगे (बदले गए यूआरएल के लिए, मूल के लिए नहीं)।