AJAX 웹 페이지에서 DOM과 상호 작용합니까?

안녕하세요, 저는 확장 프로그램 개발 경험이 없지만 배우기 위해 노력하고 있습니다. 특정 트위터 아이콘 만 차단하는 확장 프로그램을 만들고 싶습니다. 이 tutorial을 통해 보았을 때 나는 많은 것을 알아 냈습니다. DOM에서 트윗을보고 사용자 이름을 확인하고 JavaScript로 이미지 표시를 사용하지 않도록 설정할 수 있습니다. AJAX 웹 페이지에서 DOM과 상호 작용합니까?

내가 지금까지의 그것 twitter.html 부르 자 가짜 페이지를 만들어이있어, 그건 좀 다음과 같습니다

<html> 
    <div class="stream-item" data-item-type="tweet"> 
     <div class="tweet-image"> 
      <img src="abc.jpg" data-user-id="1234"> 
     </div> 
    </div>

.....

<script src="utility.js"></script> 
<script type="text/javascript"> 
var tweets = getElementsByClass("tweet"); 
for (var i = 0; i < tweets.length; i++) { 
    var tweet = tweets[i]; 
    var name = tweet.getAttribute("data-screen-name"); 
    if (name.toLowerCase() == 'some-username'.toLowerCase()) { 
     var icon = tweet.getElementsByTagName("img")[0]; 
     icon.style.display='none'; 
    } 
} 

</script> 

</html>

그래서 숨어 이미지는 문제가 아니지만 적절한 시간에 실행하려면 coe를 얻는 것입니다. 사파리 확장 빌더를 사용하여 기본 페이지뿐만 아니라로드 전 및로드 후 js 파일을 제공 할 수 있습니다. 그러나 실제 twitter.com에서 사용하는 AJAX로 인해 트윗이로드되기 전에 페이지로드가 완료됩니다.

트윗이로드 된 후 을 실행하려면 어떻게해야합니까?

출처

2010-12-04 Derrick

제공된 코드는 모든 데이터가로드 된 것으로 가정합니다. 데이터를로드하는 것은 무엇입니까? 다른 사람의 API를 사용하고 있다면 아마도 '완전한'이벤트에 연결하는 방법을 제공했을 것입니다. – mqsoh

답장을 보내 주셔서 감사합니다. 예, 모든 데이터가로드 된 것으로 가정합니다. 그 모든 것들은 특정 요소에 스타일을 적용하는 것이 거의 틀림 없습니다. 페이지의 '문서 객체 모델'이외의 다른 API를 사용하지 않습니다. 나는 단지 연장을 통해 그것을하려고하고있다. [Facebook Neue] (http://soggysh.it/facebook-neue/) 확장자와 매우 유사합니다. – Derrick

데이터로드에 대한 질문에 대답하려면 : 브라우저가 twitter.com으로 이동하면 페이지가 제공 될 것입니다. 빨리로드되는 자바 스크립트가 있습니다. 그런 다음 자바 스크립트는 아마도 비동기 http 요청을 사용하여 트윗을로드합니다. 웹 개발자가 아니기 때문에 100 % 정확도로 생각하지 마십시오.이 주제에 관해서는 거의 알지 못합니다. – Derrick

DOM 노드가 삽입 될 때마다 ... 잘 읽는 DOMNodeInserted를 청취해야합니다. 일단 수신되면 노드가 관심있는 유형인지 확인하고 거기에서부터 진행하십시오.

나는 변화를 수용하기 위해 코드를 수정했다. Chrome에서 성공적으로 테스트했습니다.

window.addEventListener("DOMNodeInserted", 
    function(event){ 
     var streamItem = event.target; 
     if (streamItem == null) 
      return; 

     if (streamItem.getAttribute('class') != 'stream-item') 
      return; 

     var tweet = streamItem.getElementsByClassName("tweet",streamItem)[0]; 
     var name = tweet.getAttribute("data-screen-name"); 
     if (name.toLowerCase() == 'some-username'.toLowerCase()) 
     { 
      var icon = tweet.getElementsByTagName("img")[0]; 
      icon.style.display='none'; 
     } 
    }, 
    false);

출처

2010-12-04 08:43:02 Sasha

감사합니다. 알았어! – Derrick

문제가 없습니다. 즐기십시오! – Sasha

AJAX 웹 페이지에서 DOM과 상호 작용합니까?

답변

관련 문제