페이지를 HTML로 업데이트하면 무한 루프가됩니다.

Question

Firefox 확장 기능을 쓰고 있습니다. 이 확장 프로그램은 페이지의 특정 단어를 다른 단어로 바꿉니다. 여기에 사용하고있는 기본 코드는 다음과 같습니다.

function startup() { 
    gBrowser.addEventListener("load", pageLoad, true); 
} 

function pageLoad(event) { 
    if (event.originalTarget instanceof HTMLDocument) { 
     var ht = content.document.body.innerHTML; 
     ht = ht.replace(/\bthe\b/g,"el"); 
     content.document.body.innerHTML = ht; 
    } 
} 

문제는이 코드가 무한 루프를 일으키는 것입니다. 본문의 innerHTML 속성을 설정하면 무한 루프가 발생하는 다른로드 이벤트를 보냅니다.

페이지로드 이벤트가 다시 발생하지 않고 페이지를로드하면 어떻게 수정할 수 있습니까?

Answer 1

body 태그 바로 안에 div 또는 span 태그가 있습니까? 그럼 당신은 단지 그 요소의 innerHTML을 업데이트 할 수 있고 전체 몸체는 업데이트 할 수 없습니다 ...

Answer 2

다음 코드를 사용하여 이전에 이미 실행되었는지 확인합니다. 전역 범위 밖으로 loaded 변수를 유지하고 싶다면

var loaded = false; 

function pageLoad(event) { 
    if (!loaded) { 
     if (event.originalTarget instanceof HTMLDocument) { 
      var ht = content.document.body.innerHTML; 
      ht = ht.replace(/\bthe\b/g,"el"); 
      content.document.body.innerHTML = ht; 
     } 
     loaded = true; 
    } 
} 

또는, 당신은 폐쇄 사용할 수 있습니다 외부 기능이 즉시 실행됩니다

var pageLoad = (function() { 
    var loaded = false; 
    return function(event) { 
    if (!loaded) { 
     if (event.originalTarget instanceof HTMLDocument) { 
      var ht = content.document.body.innerHTML; 
      ht = ht.replace(/\bthe\b/g,"el"); 
      content.document.body.innerHTML = ht; 
     } 
     loaded = true; 
    } 
    } 
}(); 

을하고 가시성을 확보 할 내부 함수를 반환 클로저로 인해 변수가 loaded입니다.