दिलचस्प पोस्ट
कैसे बहुलक क्षुधा में एक मुख्य समारोह को लागू करने के लिए Linq एक्सटेंशन विधियों का उपयोग करते हुए आप बाएं बाहरी सहभागी कैसे करते हैं एंड्रॉइड: स्पिनर को कस्टम ऑब्जेक्ट लिस्ट में बाँध कैसे करें? गेटर्स और सेटर्स कैसे काम करते हैं? सी # जेनेरिक जेनेरिक प्रकार मापदंडों में से एक से क्यों नहीं ले सकते हैं जैसे वे C ++ टेम्पलेट में कर सकते हैं? संपूर्ण फ़ाइल को पढ़ने के बिना छवि आयाम प्राप्त करना टेम्पलेट वर्ग के लिए ओवरलोडिंग मित्र ऑपरेटर << VB.NET की छुपी हुई विशेषताएं? async / await – जब कार्य को शून्य से वापस लौटाया जाए? कैसे एक छवि को आधार64 एन्कोडिंग में बदलने के लिए? तो, JSONP या CORS? सी ++ पढ़ता है और एक परमाणु का लेखन करता है? java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener एक MySQL ब्लॉब में संग्रहीत एक छवि प्रदर्शित करना एक चुनिंदा बॉक्स से आइटम निकालना

क्या कोई जावास्क्रिप्ट / jQuery DOM परिवर्तन श्रोता है?

मूलतः मैं एक स्क्रिप्ट निष्पादित करना चाहता हूँ जब एक डीआईवी परिवर्तन की सामग्री। चूंकि स्क्रिप्ट अलग (क्रोम एक्सटेंशन और वेबपेज स्क्रिप्ट में सामग्री स्क्रिप्ट) हैं, इसलिए मुझे सिर्फ डोम राज्य में बदलावों का पालन करने की आवश्यकता है। मैं मतदान की स्थापना कर सकता था लेकिन यह मैला दिखता है।

वेब के समाधान से एकत्रित समाधान "क्या कोई जावास्क्रिप्ट / jQuery DOM परिवर्तन श्रोता है?"

इस उत्तर की पुरानी सामग्री को अब नापसंद किया गया है ।
MutationObserver आधार पर अन्य उत्तर देखें

कई साल बाद, अब आधिकारिक तौर पर एक बेहतर समाधान है। DOM4 उत्परिवर्तन पर्यवेक्षकों को नापसंद DOM3 उत्परिवर्तन की घटनाओं के लिए प्रतिस्थापन हैं। वे वर्तमान में आधुनिक ब्राउज़रों में MutationObserver WebKitMutationObserver रूप में कार्यान्वित किए गए हैं (या क्रोम के पुराने संस्करणों में वेंडर-प्रीफ़िक्स WebKitMutationObserver में):

 MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(function(mutations, observer) { // fired when a mutation occurs console.log(mutations, observer); // ... }); // define what element should be observed by the observer // and what types of mutations trigger the callback observer.observe(document, { subtree: true, attributes: true //... }); 

यह उदाहरण document और उसके पूरे उपशीर्षक पर DOM परिवर्तनों के लिए सुनता है, और यह तत्व विशेषताओं के साथ-साथ संरचनात्मक परिवर्तनों पर भी परिवर्तन करेगा। ड्राफ्ट स्पेक में मान्य उत्परिवर्तन श्रोता गुणों की पूरी सूची है:

childList

  • यह तय करें कि म्यूटेशन के लक्ष्य के बच्चों को मनाया जाना है।

गुण

  • यह तय करें कि लक्ष्य के गुणों के उत्परिवर्तनों को मनाया जाना है।

characterData

  • निर्धारित करें कि लक्ष्य डेटा के म्यूटेशन को मनाया जाना चाहिए।

सबट्री

  • true करने के लिए सेट करें यदि उत्परिवर्तन न सिर्फ लक्ष्य निर्धारित करने के लिए, बल्कि लक्ष्य के वंशज भी देखे जा सकते हैं।

attributeOldValue

  • अगर true को सही और लक्ष्य के विशेषता मान पर सेट किया जाता true तो true सेट करें ताकि उत्परिवर्तन की आवश्यकता हो।

characterDataOldValue

  • true करने के लिए सेट करें अगर characterData डेटा को सही और लक्ष्य के डेटा पर सेट किया जाता है, तो परिवर्तन को रिकॉर्ड करने की आवश्यकता है।

attributeFilter

  • विशेषताओं की एक सूची के लिए सेट करें (नामस्थान के बिना) स्थानीय नाम यदि सभी विशेषता परिवर्तनों को मनाया नहीं जाना चाहिए।

(यह सूची अप्रैल 2014 के रूप में चालू है, आप किसी भी परिवर्तन के लिए विनिर्देश की जांच कर सकते हैं।)

आप div को कैसे बदल रहे हैं इसके आधार पर एक अन्य दृष्टिकोण। यदि आप एक jQuery की HTML () विधि के साथ एक div की सामग्री को बदलने के लिए JQuery का उपयोग कर रहे हैं, तो आप उस विधि को बढ़ा सकते हैं और हर बार जब आप html को एक div में डालते हैं

 (function( $, oldHtmlMethod ){ // Override the core html method in the jQuery object. $.fn.html = function(){ // Execute the original HTML method using the // augmented arguments collection. var results = oldHtmlMethod.apply( this, arguments ); com.invisibility.elements.findAndRegisterElements(this); return results; }; })( jQuery, jQuery.fn.html ); 

हम सिर्फ HTML () को कॉल रोकते हैं, इसके साथ पंजीकरण फ़ंक्शन बुलाते हैं, जो संदर्भ में लक्ष्य तत्व को नई सामग्री प्राप्त करने के लिए संदर्भित करता है, तो हम कॉल को मूल jquery.html () फ़ंक्शन पर पास करते हैं। मूल एचटीएमएल () पद्धति के परिणामों को वापस करने के लिए याद रखें, क्योंकि जेक्यूएल इसे विधि के लिए चेनिंग की अपेक्षा करता है।

विधि अधिलेखित और विस्तार के बारे में अधिक जानकारी के लिए, http://www.bennadel.com/blog/2009-Using-elf-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm देखें , जो कहां है मैं बंद समारोह फेंक दिया। JQuery के साइट पर प्लग इन ट्यूटोरियल भी देखें।

कई साइट गतिशील रूप से जोड़ने / दिखाने / सामग्री को बदलने के लिए AJAX का उपयोग करते हैं कभी-कभी इसका उपयोग इन-साइट नेविगेशन के बजाय किया जाता है, इसलिए वर्तमान यूआरएल को प्रोग्राममैटिक रूप से बदल दिया जाता है और इस स्थिति में ब्राउज़र द्वारा सामग्री स्क्रिप्ट स्वचालित रूप से निष्पादित नहीं की जाती है क्योंकि पेज रिमोट सर्वर से पूरी तरह से नहीं लिया गया है।


सामग्री स्क्रिप्ट में उपलब्ध पृष्ठ परिवर्तनों का पता लगाने के सामान्य जेएस विधियां

  • वास्तव में डीओएम परिवर्तनों का पता लगाने के लिए उत्परिवर्तन ऑब्ज़र्वर ( डॉक्स ):

    • एचटीएमएल सामग्री को बदलने के तरीके के रूप में यह पृष्ठ पर लोड हो रहा है
    • संपूर्ण डीओएम में नोड्स का पता लगाने के लिए उत्परिवर्तन ऑब्जर्वर का प्रदर्शन
  • ऐसी साइट्स के लिए ईवेंट श्रोता जो एक DOM ईवेंट भेजकर सामग्री परिवर्तन संकेत करते हैं:

    • pjax:end कई पीजेएक्स आधारित साइटों जैसे गिटहब,
      देखें कि एक पीएक्सएक्स लोड से पहले और बाद में jQuery कैसे चलाया जाता है?
    • क्रोम ब्राउज़र में Google खोज द्वारा उपयोग की गई window पर message ,
      क्रोम एक्सटेंशन Google खोज रिफ्रेश का पता लगाएं
    • यूट्यूब द्वारा इस्तेमाल किए गए document पर spfdone ,
      देखें कि यूट्यूब पर पेज नेविगेशन का पता कैसे लगाया जाता है और पृष्ठ को प्रस्तुत करने से पहले एचटीएमएल को संशोधित किया जाता है?
  • सेट अंतराल के माध्यम से डोम की आवधिक जांच :
    जाहिर है यह केवल मामलों में काम करेगा जब आप अपने आईडी / चयनकर्ता द्वारा पहचाने जाने वाले एक विशेष तत्व की प्रतीक्षा करेंगे, और यह आपको नई गतिशील रूप से जोड़ा गया सामग्री का पता लगाने नहीं देगा, जब तक कि आप मौजूदा सामग्री को किसी प्रकार की फिंगरप्रिंट न करें।

  • इंजेक्ट किए गए डोम स्क्रिप्ट के अंदर क्लोकिंग इतिहास एपीआई :

     document.head.appendChild(document.createElement('script')).text = '(' + function() { // injected DOM script is not a content script anymore, // it can modify objects and functions of the page var _pushState = history.pushState; history.pushState = function(state, title, url) { _pushState.call(this, state, title, url); window.dispatchEvent(new CustomEvent('state-changed', {detail: state})); }; // repeat the above for replaceState too } + ')(); this.remove();'; // remove the DOM script element // And here content script listens to our DOM script custom events window.addEventListener('state-changed', function(e) { console.log('History state changed', e.detail, location.hash); doSomething(); }); 
  • हैश परिवर्तना , पॉपस्टेट इवेंट्स को सुनना:

     window.addEventListener('hashchange', function(e) { console.log('URL hash changed', e); doSomething(); }); window.addEventListener('popstate', function(e) { console.log('State changed', e); doSomething(); }); 


एक्सटेंशन-विशिष्ट: किसी पृष्ठभूमि / ईवेंट पृष्ठ में URL परिवर्तन का पता लगाता है।

नेविगेशन के साथ काम करने के लिए उन्नत एपीआई हैं: वेबनैविगेशन , वेबआरसीसी , लेकिन हम साधारण क्रोम। टैब का उपयोग करेंगे। अपडेट किए गए ईवेंट श्रोता जो सामग्री स्क्रिप्ट में संदेश भेजता है :

  • manifest.json:
    पृष्ठभूमि / ईवेंट पृष्ठ घोषित करें
    सामग्री स्क्रिप्ट घोषित करें
    "tabs" अनुमति जोड़ें

  • background.js

     var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/; chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (rxLookfor.test(changeInfo.url)) { chrome.tabs.sendMessage(tabId, 'url-update'); } }); 
  • content.js

     chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { if (msg === 'url-update') { doSomething(); } }); 

MutationObserver एपीआई द्वारा प्रदान किए गए "कच्चे" उपकरणों के अलावा, "सुविधा" पुस्तकालयों में डीओएम म्यूटेशन के साथ काम करने के लिए मौजूद हैं।

विचार करें: उत्परिवर्तन ओब्सर्वर उप-धाराओं के संदर्भ में प्रत्येक DOM परिवर्तन का प्रतिनिधित्व करता है इसलिए यदि आप, उदाहरण के लिए, एक निश्चित तत्व को डालने के लिए इंतजार कर रहे हैं, तो यह mutations.mutation[i].addedNodes[j] के बच्चों के अंदर गहरा हो सकता है। mutations.mutation[i].addedNodes[j]

एक अन्य समस्या यह है कि जब आपका अपना कोड, म्यूटेशन की प्रतिक्रिया में, DOM में बदलाव करता है – आप अक्सर इसे फ़िल्टर करना चाहते हैं।

एक अच्छी सुविधा लाइब्रेरी जो ऐसी समस्याओं का हल करती है, mutation-summary (अस्वीकरण: मैं लेखक नहीं हूँ, केवल एक संतुष्ट उपयोगकर्ता), जो आपको आपकी रुचि में पूछे जाने वाले प्रश्नों को निर्दिष्ट करने में सक्षम बनाता है, और ठीक उसी तरह मिलता है।

डॉक्स से बेसिक उपयोग उदाहरण:

 var observer = new MutationSummary({ callback: updateWidgets, queries: [{ element: '[data-widget]' }] }); function updateWidgets(summaries) { var widgetSummary = summaries[0]; widgetSummary.added.forEach(buildNewWidget); widgetSummary.removed.forEach(cleanupExistingWidget); }