浏览器插件w/ jQuery -捕获DOM更新(特别是Facebook)

Question

我目前正在编写一个浏览器插件，插入一些HTML元素到页面上。我想知道如何让我的插件检测网站何时更新了DOM，然后根据需要去修改HTML。

在这个特定的例子中，我试图在Facebook上插入一些HTML。使用$(document).ready()函数不工作，因为Facebook正在用AJAX更新他们的页面。当用户导航到组页面时，以及当用户向下滚动页面并加载更多信息时，这似乎是正确的。

我不能简单地使用.live()附加一个点击或滚动侦听器，因为我仍然需要等待页面完成更新，然后才能更改DOM。

有人有什么想法吗?

Answer 1

可以使用JavaScript加载注释，代码如下:

var abc = $("#fb-comments-wrapper");
var b = "<fb:comments href="page_url" num_posts="2" width="420"></fb:comments>"
abc.html(b);

调用以下代码后，将加载facebook评论到名为'fb-comments-wrapper'的div，并在加载时调用'facebookCommentLoaded'函数:

FB.XFBML.parse(document.getElementById('container_of_fb-comments-wrapper'),facebookCommentLoaded);

你的' facebookcommentloaddfunction '可以做你想做的事情:

function facebookCommentLoaded() {
    $(".uiBoxYellow").css("display","none");
    $(".commentas").css("display","none");
}

然而，我无法对facebookdiv的样式进行任何更改。由于某种原因，它们无法通过document.getElementByClass获得。似乎facebook修改dom的方式阻止自定义CSS