greasemonkey 스크립트 Greasemonkey가 존재하기 전에 요소에 액세스하려고 시도하고 null을 얻습니다.

Question

Greasemonkey를 사용하는 "google.com/*"에 작은 스크립트가 있습니다.
기본적으로 내 스크립트는 Google 메뉴에 몇 가지 메뉴 항목을 추가합니다 (Images Images 지도 뉴스 쇼핑 등 ...);

이 메뉴는 QBAR div의 내부에과 같이 그 모양 :

<div id="gbar"> ...menu code ... </div> 

당신이 구글에서 웹 페이지 (www.google.com)에 가면 내 스크립트에 다음 줄은 잘 작동 :

var gbar = var gbar = document.getElementById("gbar"); 
if (qbar != null) alert("qbar exist!"); 
else alert("qbar is null"); 

이 코드 경고 qbar는 좋은 것으로 존재합니다. 지금

내가이 페이지에 당신을 얻을 것이다 "미치광이"예를 들어 검색에 구글에 anyword에 대한 보면 지금

http://www.google.com/#sclient=psy&hl=en&q=madman&aq=f&aqi=g5&aql=&oq=&pbx=1&fp=fd0f73886609171d

스크립트가 여전히 지금은 경고 만 실행은

"gbar은 null입니다"

그 이유는 gbar 요소가 페이지에서 생성되기 전에 스크립트가 실행되고 있다고 생각합니다. 이상한 사촌입니다. 그리스어 원숭이 스크립트는 모든 콘텐츠가로드 될 때만 실행됩니다.

Answer 1

DOM mutation event을 설정할 수 있습니다. 기본적으로, 여기 단계는 다음과 같습니다

• 은 초기 검색 document.getElementById('gbar')를 수행하고 발견 경우를 처리합니다.

• 문서에 DOMNodeInserted 이벤트 처리기를 설정하십시오.

  • 삽입 된 요소에 id="gbar"이 있으면 gbar가 삽입 된 것입니다.
  • 그렇지 않은 경우 삽입 된 요소 내에서 id="gbar" 인 요소를 검색하고 발견 된 경우 처리합니다.

당신은 working example 코드를 볼 수 있습니다. 문서에 gbar이 추가되면 5 개의 외설 표시가 추가됩니다.