JavaScript/jQuery DOM 변경 청취자가 있습니까?

JavaScript/jQuery DOM 변경 청취자가 있습니까?

기본적으로 스크립트가 실행되도록 하고 싶다.DIV바꾸다.스크립트는 별개이므로(Chrome 확장 및 웹 페이지 스크립트의 콘텐츠 스크립트), DOM 상태의 변화를 간단하게 관찰할 수 있는 방법이 필요합니다.내가 여론조사를 할 수는 있지만 그건 엉성해 보인다.

오랫동안 DOM3 변환 이벤트는 사용 가능한 최고의 솔루션이었지만 성능상의 이유로 사용되지 않았습니다.DOM4 Mutation Observers는 사용되지 않는 DOM3 Mutation 이벤트를 대체하는 것입니다.현재 최신 브라우저에는 다음과 같이 구현되어 있습니다.MutationObserver(또는 벤더가 제공하는WebKitMutationObserver이전 버전의 Chrome):

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
  //...
});

이 예에서는, 에서 DOM 의 변경을 리슨 합니다.document요소 속성의 변경과 구조적 변화에 따라 발생하게 됩니다.드래프트 사양에는 유효한 변환 리스너 속성의 완전한 리스트가 있습니다.

아이 리스트

• 로 설정true대상 자녀에 대한 돌연변이가 관찰되는 경우.

특성

• 로 설정true대상 속성에 대한 돌연변이가 관찰되는 경우.

문자 데이터

• 로 설정true대상 데이터에 대한 돌연변이가 관찰되는 경우.

서브트리

• 로 설정true표적뿐만 아니라 대상의 후손에 대한 돌연변이가 관찰될 경우.

attribute Old Value(오래된 값)

• 로 설정true한다면attributes변환이 기록되기 전에 true 및 타겟 속성 값으로 설정됩니다.

character Data Old Value(문자 데이터 오래된 값)

• 로 설정true한다면characterData돌연변이를 기록하기 전에 true 및 대상 데이터로 설정됩니다.

attribute Filter(속성 필터)

• 모든 속성 돌연변이를 관찰할 필요가 없는 경우 속성 로컬 이름 목록(네임스페이스 없음)으로 설정합니다.

(이 목록은 2014년 4월 현재 최신이며, 사양의 변경 사항을 확인할 수 있습니다.)

편집

이 답변은 폐지되었습니다.정답을 답안지로 확인하세요.

이것은 Chrome 확장용이므로 표준 DOM 이벤트를 사용하는 것이 좋습니다.DOMSubtreeModified브라우저 전체에서 이 이벤트에 대한 지원을 참조하십시오.1.0부터 Chrome에서 지원되고 있습니다.

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

여기서 작업 예를 참조하십시오.

많은 사이트에서는 AJAX/XHR/fetch를 사용하여 동적으로 콘텐츠를 추가, 표시, 수정하고 창을 엽니다.현재 URL을 프로그래밍 방식으로 변경할 수 있도록 사이트 내 탐색 대신 이력 API를 사용합니다.이러한 사이트는 Single Page Application의 줄임말인 SPA라고 불립니다.

---

일반적인 JS 페이지 변경 감지 방법

• 문자 그대로 DOM 변경을 검출하기 위한 MutationObserver(docs).

  정보/예:

  • 페이지에 로드될 때 HTML 콘텐츠를 변경하는 방법

  • DOM 전체의 노드를 검출하기 위한 MutationObserver의 퍼포먼스.

  • URL도 변경되었을 경우에만 변경에 대응하는 Lightweight 옵서버:

    let lastUrl = location.href; 
    new MutationObserver(() => {
      const url = location.href;
      if (url !== lastUrl) {
        lastUrl = url;
        onUrlChange();
      }
    }).observe(document, {subtree: true, childList: true});
    
    function onUrlChange() {
      console.log('URL changed!', location.href);
    }
    

• DOM 이벤트를 전송하여 콘텐츠 변경을 알리는 사이트의 이벤트청취자:

  • pjax:enddocument예를 들어 많은 pjax 기반 사이트에서 사용됩니다. 헙,,
    pjax 로드 전후에 jQuery를 실행하는 방법을 참조하십시오.
  • messagewindow 해해사사사 e e e e e e e에 의해 사용됩니다.,
    Chrome 확장 기능 검색 Google 검색 새로 고침 참조
  • yt-navigate-finish유튜브
    YouTube에서 페이지 내비게이션을 감지하고 모양을 매끄럽게 수정하는 방법을 볼 수 있습니까?

• setInterval을 통한 DOM 정기 체크:
  이 기능은 id/selector에 의해 식별된 특정 요소가 나타나기를 기다리는 경우에만 작동하며, 기존 컨텐츠의 지문을 작성하는 방법을 개발하지 않는 한 동적으로 추가된 새로운 컨텐츠를 전체적으로 탐지할 수 없습니다.

• 클로킹 이력 API:

  let _pushState = History.prototype.pushState;
  History.prototype.pushState = function (state, title, url) {
    _pushState.call(this, state, title, url);
    console.log('URL changed', url)
  };
  

• 해시 변경, popstate 이벤트 재생 중:

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

추신. 이러한 모든 방법을 WebExtension의 컨텐츠 스크립트에서 사용할 수 있습니다.이 경우 URL이 history.pushState 또는 replaceState를 통해 변경되어 페이지 자체가 동일한 콘텐츠스크립트 환경에서 동일하게 유지되기 때문입니다.

div를 어떻게 바꾸느냐에 따라 다른 방법이 있습니다.JQuery를 사용하여 html() 메서드로 div의 내용을 변경하는 경우 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() 함수로 전달합니다.원래 html() 메서드의 결과를 반환하는 것을 잊지 마십시오.이는 JQuery가 메서드 체인을 위해 html() 메서드를 사용하기 때문입니다.

방법 재정의 및 확장에 대한 자세한 내용은 폐쇄 함수를 자른 http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm,을 참조하십시오.JQuery 사이트에서 플러그인 튜토리얼도 확인하십시오.

API에서 제공하는 "원시" 도구 외에 DOM 돌연변이를 사용하기 위한 "편의성" 라이브러리가 있습니다.

서브트리의 에서 각 .MutationObserver는 DOM을 사용합니다.예를 어떤 , 어떤 요소가 삽입되기를 기다리고 있을 때, 어떤 가 삽입될지 때문에, 어떤 요소가 삽입될지 모르기 때문에, 그 요소가 삽입될지 때문에 그 요소가 '아니다', '아니다', '아니다', '아니다', '아니다', '아니다', '아니다', '아니다'의 깊은 곳에 수 .mutations.mutation[i].addedNodes[j].

또 다른 문제는 돌연변이에 대한 반응으로 자신의 코드가 DOM을 변경하는 것입니다. 자주 이를 필터링해야 합니다.

이러한 문제를 해결하는 좋은 편의 라이브러리는 다음과 같습니다(청구인:저는 작성자가 아니라 만족하는 사용자입니다.) 그러면 관심 있는 항목에 대한 쿼리를 지정하여 정확하게 얻을 수 있습니다.

문서의 기본적인 사용 예:

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

언급URL : https://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener