একটি জাভাস্ক্রিপ্ট / jQuery DOM পরিবর্তন শ্রোতা আছে?

Question

মূলত আমি কোনও স্ক্রিপ্ট সম্পাদন করতে চাই যখন DIVপরিবর্তনের বিষয়বস্তু exec যেহেতু স্ক্রিপ্টগুলি পৃথক (ক্রোম এক্সটেনশান এবং ওয়েবপৃষ্ঠায় স্ক্রিপ্টে সামগ্রী স্ক্রিপ্ট), তাই DOM অবস্থায় পরিবর্তনগুলি পর্যবেক্ষণ করার জন্য আমার একটি উপায় দরকার। আমি পোলিং সেটআপ করতে পারতাম তবে এটিকে নিবিড় বলে মনে হচ্ছে।

Answer 1

দীর্ঘ সময়ের জন্য, DOM3 রূপান্তর ইভেন্টগুলি সর্বোত্তম উপলব্ধ সমাধান ছিল, তবে পারফরম্যান্সের কারণে এগুলি হ্রাস করা হয়েছে। DOM4 মিউটেশন পর্যবেক্ষক হ'ল DOM3 রূপান্তর ইভেন্টগুলির প্রতিস্থাপন। এগুলি বর্তমানে আধুনিক ব্রাউজারগুলিতেMutationObserver (বা 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এবং এর সম্পূর্ণ সাবট্রির জন্য শোনে এবং এটি উপাদান বৈশিষ্ট্যের পরিবর্তনের পাশাপাশি কাঠামোগত পরিবর্তনগুলিকে আগুন ধরিয়ে দেবে। খসড়া স্পেসে বৈধ মিউটেশন শ্রোতার বৈশিষ্ট্যগুলির একটি সম্পূর্ণ তালিকা রয়েছে :

childList

• trueলক্ষ্য করে বাচ্চাদের টার্গেট করার জন্য যদি মিউটেশনগুলি লক্ষ্য করা যায় তবে সেট করুন ।

বৈশিষ্ট্যাবলী

• trueটার্গেটের বৈশিষ্ট্যগুলির মধ্যে রূপান্তরগুলি লক্ষ্য করা যায় কিনা সেট করুন ।

characterData

• trueটার্গেটের ডেটাতে রূপান্তরগুলি পর্যবেক্ষণ করা হয় কিনা তা সেট করুন ।

সাবট্রি

• সেট trueখুঁজতে এবং তাতে পরিব্যক্তি শুধু নির্দিষ্ট করা যায় না, কিন্তু লক্ষ্য উত্তরপুরুষদের পালন করা হয়।

attributeOldValue

• মিউটেশনটি রেকর্ড করার আগে সত্য এবং টার্গেটের অ্যাট্রিবিউট মানটি সেট করা trueথাকলে সেট করুন attributes।

characterDataOldValue

• মিউটেশনটি রেকর্ড করার আগে সত্য এবং টার্গেটের ডেটা সেট করা trueথাকলে characterDataসেট করুন।

attributeFilter

• সমস্ত অ্যাট্রিবিউট মিউটেশনগুলি পর্যবেক্ষণ করা প্রয়োজন না হলে অ্যাট্রিবিউট স্থানীয় নামের একটি তালিকাতে (নেমস্পেস ব্যতীত) সেট করুন।

(এ তালিকাটি 2014 এপ্রিল পর্যন্ত বর্তমান; আপনি যে কোনও পরিবর্তনের জন্য বিশদটি পরীক্ষা করতে পারেন))

Comments

@ আশরাফবাশির আমি ফায়ারফক্স ১৯.০.২-তে নমুনাটি ঠিকঠাকভাবে দেখছি: আমি ([{}])কনসোলে লগইন করেছি , যা MutationRecordআমি এটিতে ক্লিক করলে প্রত্যাশিত দেখায় । দয়া করে আবার যাচাই করুন, কারণ এটি জেএসফিডেলে কোনও অস্থায়ী প্রযুক্তিগত ব্যর্থতা হতে পারে। আমি এখনও IE তে এটি পরীক্ষা করিনি, যেহেতু আমার কাছে আইই 10 নেই, যা বর্তমানে মিউটেশন ইভেন্টগুলি সমর্থন করার একমাত্র সংস্করণ।

— অ্যাপসিলাররা

আমি কেবল একটি উত্তর পোস্ট করেছি যা আইই 10 + এবং বেশিরভাগ কিছুতে কাজ করে।

— নাগতুর

স্পেসিফিকেশনটিতে কোনও সবুজ বাক্স আছে বলে মনে হচ্ছে না যা মিউটেশন পর্যবেক্ষক বিকল্পগুলির আর তালিকা করে না। এটি বিভাগ 5.3.1- এ বিকল্পগুলি তালিকাভুক্ত করে এবং এর নীচে আরও সামান্য তাদের বর্ণনা করে।

— এলএস

@ এলএস ধন্যবাদ, আমি লিঙ্কটি আপডেট করেছি, সবুজ বাক্স সম্পর্কে কিছুটা সরিয়ে দিয়েছি এবং আমার উত্তরটিতে পুরো তালিকাটি সম্পাদনা করেছি (কেবলমাত্র ভবিষ্যতের লিঙ্ক পচানোর ক্ষেত্রে)।

— অ্যাপসিলাররা

ক্যান আই ইউজ থেকে একটি ব্রাউজারের সামঞ্জস্যতা সারণী ।

— বিডেশম

Answer 2

সম্পাদন করা

এই উত্তরটি এখন অবচয় করা হয়েছে। অ্যাপসিলারদের উত্তর দেখুন ।

যেহেতু এটি কোনও ক্রোম এক্সটেনশনের জন্য, আপনি সম্ভবত স্ট্যান্ডার্ড ডিওএম ইভেন্টটি ব্যবহার করতে পারেন - DOMSubtreeModified। ব্রাউজারগুলি জুড়ে এই ইভেন্টের জন্য সমর্থন দেখুন । এটি 1.0 থেকে ক্রোমে সমর্থনযোগ্য।

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

এখানে একটি কাজের উদাহরণ দেখুন ।

Comments

আমি লক্ষ্য করেছি যে এই ইভেন্টটি নির্দিষ্ট নির্বাচকদের পরেও বরখাস্ত করা যেতে পারে। আমি বর্তমানে তদন্ত করছি।

— পেডার রাইস

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified এই ইভেন্টটিকে অবহিত করা হয়েছে, এর পরিবর্তে আমরা কী ব্যবহার করব?

— মাসলো

@ মাসলো- নেই! stackoverflow.com/questions/6659662/...

— স্যাম Rueby

নেই github.com/joelpurra/jquery-mutation-summary যা মূলত jQuery ব্যবহারকারীদের জন্য এটা solves।

— ক্যাপি ইথেরিয়েল

আপনি যদি ক্রোম এক্সটেনশনগুলি তৈরি করছেন তবে এখনও কাজ করে। অমূল্য।

— ধারণা 47

Answer 3

গতিশীলভাবে সামগ্রী যুক্ত / প্রদর্শন / পরিবর্তন করতে অনেকগুলি সাইট এজ্যাক্স ব্যবহার করে। কখনও কখনও এটি ইন-সাইট নেভিগেশনের পরিবর্তে ব্যবহৃত হয়, সুতরাং বর্তমান ইউআরএল প্রোগ্রামগতভাবে পরিবর্তিত হয় এবং সামগ্রীতে স্ক্রিপ্টগুলি ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে কার্যকর করা হয় না কারণ পৃষ্ঠাটি সম্পূর্ণরূপে দূরবর্তী সার্ভার থেকে পাওয়া যায় নি ched

---

সামগ্রীর স্ক্রিপ্টে পৃষ্ঠা পরিবর্তনগুলি সনাক্ত করার জন্য সাধারণ জেএস পদ্ধতি ।

• আক্ষরিকভাবে DOM পরিবর্তনগুলি সনাক্ত করতে মিউটেশনউসারবার ( ডক্স ):

  • এইচটিএমএল সামগ্রীটি পৃষ্ঠায় লোড হওয়ার সাথে সাথে কীভাবে পরিবর্তন করা যায়
  • পুরো ডিওমে নোডগুলি সনাক্ত করতে মিউটেশনঅবেসভারের পারফরম্যান্স ।

• যে সাইটগুলির জন্য ডোম ইভেন্ট পাঠিয়ে সামগ্রী পরিবর্তনের সিগন্যাল দেয় ইভেন্টের শ্রোতা :

  • pjax:endউপর documentঅনেক pjax ভিত্তিক সাইট যেমন GitHub কর্তৃক ব্যবহৃত
    দেখতে আগে ও একটি pjax লোড পর jQuery এর চালানোর জন্য কিভাবে?
  • messageউপর windowChrome ব্রাউজারে যেমন Google অনুসন্ধানে ব্যবহৃত,
    দেখতে ক্রোম এক্সটেনশন গুগল সার্চ রিফ্রেশ সনাক্ত
  • spfdoneউপর documentইউটিউব কর্তৃক ব্যবহৃত
    দেখতে কিভাবে ইউটিউব এবং পরিবর্তন এইচটিএমএল পৃষ্ঠার গৌণ সনাক্ত করতে সামনে পৃষ্ঠা পেশ করা হয়েছে?

• সেট ইন্টেরওয়ালের মাধ্যমে ডিওএম-এর পর্যায়ক্রমিক চেকিং :
  স্পষ্টতই এটি কেবল তখনই কাজ করবে যখন আপনি তার আইডি / নির্বাচক দ্বারা চিহ্নিত কোনও নির্দিষ্ট উপাদানটি উপস্থিত হওয়ার জন্য অপেক্ষা করবেন এবং আপনি কোনও ধরণের আঙুলের ছাপ উদ্ভাবন না করলে সর্বজনীনভাবে নতুন গতিযুক্ত যুক্ত সামগ্রী সনাক্ত করতে দেবেন না বিদ্যমান বিষয়বস্তু।

• কোনও ইনজেকশনড ডিওএম স্ক্রিপ্টের ভিতরে ইতিহাসের এপিআই ক্লোকিং :

  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();
  });

• শোনা hashchange , popstate ঘটনা:

  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();
      }
  });

Answer 4

আপনি ডিভটি কীভাবে পরিবর্তন করছেন তার উপর নির্ভর করে অন্য একটি পদ্ধতি। আপনি যদি এইচটিএমএল () পদ্ধতিতে কোনও ডিভির সামগ্রী পরিবর্তন করতে JQuery ব্যবহার করছেন তবে আপনি এই পদ্ধতিটি প্রসারিত করতে এবং প্রতিবার এইচটিএমএলকে একটি ডিভিতে রাখার সময় একটি রেজিস্ট্রেশন ফাংশন কল করতে পারেন।

(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 );

আমরা কেবল এইচটিএমএল () এ কলগুলি বিরতি দিয়েছি, এটির সাথে একটি নিবন্ধকরণ ফাংশন কল করি, যা প্রসঙ্গত লক্ষ্য উপাদানটিকে নতুন সামগ্রী পেতে বোঝায়, তারপরে আমরা কলটি মূল jquery.html () ফাংশনে প্রেরণ করি। মূল এইচটিএমএল () পদ্ধতির ফলাফলগুলি ফিরিয়ে আনতে ভুলবেন না, কারণ জ্যাকুয়ারি পদ্ধতি শৃঙ্খলার জন্য এটি প্রত্যাশা করে।

পদ্ধতির ওভাররাইডিং এবং এক্সটেনশান সম্পর্কিত আরও তথ্যের জন্য, http://www.bennadel.com/blog/2009- ব্যবহার-Self-Executes-Function-Arguments-To-Override-Core-jQuery-Methods.htm দেখুন where ক্লোজার ফাংশনটি আমি আঁকড়ে ধরলাম। JQuery এর সাইটে প্লাগইন টিউটোরিয়ালটিও দেখুন।

Answer 5

এপিআই দ্বারা সরবরাহিত "কাঁচা" সরঞ্জামগুলি ছাড়াওMutationObserver , ডিওএম মিউটেশনগুলির সাথে কাজ করার জন্য "সুবিধা" লাইব্রেরি রয়েছে।

বিবেচনা করুন: মিউটেশনউসারবার সাবট্রির ক্ষেত্রে প্রতিটি ডোম পরিবর্তনের প্রতিনিধিত্ব করে। সুতরাং আপনি যদি উদাহরণস্বরূপ কোনও নির্দিষ্ট উপাদান inোকানোর জন্য অপেক্ষা করেন তবে এটি শিশুদের ভিতরে গভীর হতে পারেmutations.mutation[i].addedNodes[j] ।

আরেকটি সমস্যা হ'ল যখন আপনার নিজস্ব কোড, মিউটেশনের প্রতিক্রিয়াতে, ডম পরিবর্তন করে - আপনি প্রায়শই এটিকে ফিল্টার করতে চান।

একটি ভাল সুবিধার লাইব্রেরি যা এই জাতীয় সমস্যাগুলি সমাধান করে 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);
}