जावास्क्रिप्ट

Question

के माध्यम से दस्तावेज़ शीर्षक में परिवर्तन का पता लगाएं क्या जावास्क्रिप्ट के माध्यम से document.title/head > title में परिवर्तन का पता लगाने का कोई तरीका है? मैं इसे Google क्रोम एक्सटेंशन सामग्री स्क्रिप्ट के माध्यम से पहचानना चाहता हूं, इसलिए मैं वास्तव में लक्ष्य पृष्ठ के जेएस में कोड को वायरस नहीं कर सकता जहां वास्तविक शीर्षक परिवर्तन किया जाता है।

मैं WebKitMutationObserver जो सैद्धांतिक रूप से head > title में होने वाले बदलाव का पता लगाने के लिए सक्षम होना चाहिए मिल गया है, लेकिन यह सभी मामलों के लिए काम नहीं करता:

// set up an observer for the title element 
var target = document.querySelector('title'); 
var observer = new WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation); 
    }); 
}); 
var config = { attributes: true, childList: true, characterData: true }; 
observer.observe(target, config); 

// this jQuery statement fires the observer as expected ... 
$('head > title').text('foo'); 

// ... but this doesn't: 
document.querySelector('title').innerText = 'cheezburger'; 

// ... and neither does this: 
document.title = 'lorem ipsum'; 

कोई भी विचार?

Answer 1

मुझे एक पूरी तरह से काम करने वाला समाधान मिला है जो मूल पोस्ट में पोस्ट किए गए उदाहरण के लिए केवल एक छोटा सा संशोधन है।

// set up an observer for the title element 
var target = document.querySelector('head > title'); 
var observer = new window.WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log('new title:', mutation.target.textContent); 
    }); 
}); 
observer.observe(target, { subtree: true, characterData: true, childList: true }); 

// all three of these methods correctly fire the mutation observer 
setTimeout(function() { document.title = 'foo'; }, 1000); // the usual method 
setTimeout(function() { document.querySelector('head > title').innerText = 'bar'; }, 2000); // DOM method 
setTimeout(function() { $('head > title').text('cheezburger'); }, 3000); // jQuery-only method 

subtree: true के अलावा सभी कि यह सही काम करना आरंभ करने के लिए आवश्यक किया गया था।

अंत में setTimeout कॉल में तीन शीर्षक-बदलते तरीकों की रैपिंग केवल प्रदर्शन उद्देश्यों के लिए है; इसके बिना शीर्षक मूल्य इतनी तेज़ी से बदलता है कि WebKitMutationObserver व्यक्तिगत रूप से प्रत्येक परिवर्तन की रिपोर्ट नहीं करता है, क्योंकि उत्परिवर्ती कॉलबैक निष्पादित करने से पहले एक छोटी अवधि में परिवर्तन जमा करने के लिए MutationObserver को डिज़ाइन किया गया है।

यदि किसी को अंतिम jQuery-only विधि के माध्यम से किए गए शीर्षक परिवर्तनों की पहचान करने की आवश्यकता नहीं है, तो childList: true संपत्ति observer.observe लाइन से छोड़ी जा सकती है; पहले दो शीर्षक-बदलते तरीकों का पता लगाने के लिए केवल characterData: true की आवश्यकता है।

Answer 2

आपके पास आपके कोड उदाहरण में JQuery और जावास्क्रिप्ट दोनों हैं। सुनिश्चित नहीं हैं कि यदि आपके केवल जावास्क्रिप्ट तक ही सीमित है, लेकिन इस तरीके से jQuery

साथ यह कर सकते हैं आप परिवर्तन को गति प्रदान करना चाहते हैं, पर एक नज़र है: http://api.jquery.com/trigger/

jQuery

$(document).ready(function() { 
    $("title", "head").change(function() { 
     console.log("Title has changed"); 
    }); 
    //Trigger Change 
    $("title","head").text("New Title").trigger("change"); 
});