javascript - 当页面上加载更多内容时如何触发功能，例如 tumblr 和无限滚动

Question

您好，我正在编写一个 google chrome 扩展，为一个项目重新设计 tumblr，

我正在尝试去掉音符数后的“音符”。

到目前为止，我已经使用了它，除了 tumblr 在您向下滚动时会加载更多帖子并且这些帖子不会受到影响...:/

每次加载更多帖子或其他方式时，我如何触发此功能？

$('.note_link_current').each( function(index) {
  // Inside this function, "this" refers to the (DOM) element selected
  var text = $(this).text();
  /* ... */
});

任何帮助将不胜感激......

Answer 1

您想要的是对插入到按类过滤的 DOM 中的每个节点运行一些代码。

现代的方法是使用 DOM MutationObserver。这是一个 canonical answer关于它，这里是good documentation在上面。

简而言之，这是您应该做的:

function handleNote(element){
  var text = $(element).text();
  /* ... */
}

// Initial replacement
$('.note_link_current').each( function(index) { handleNote(this); });

var observer = new MutationObserver( function (mutations) {
  mutations.forEach( function (mutation) {
    // Here, added nodes for each mutation event are in mutation.addedNodes
    $(mutation.addedNodes).filter('.note_link_current').each(
      function(index) { handleNote(this); }
    );
  });
});

// Watch for all subtree modifications to catch new nodes
observer.observe(document, { subtree: true, childList: true });