iframe内div刷新后空白评论检测脚本失效，需每秒重载同步

嘿，我太懂这种问题了——刚写的脚本第一次能用，DOM一刷新就罢工，真的很头疼！

先给你捋清楚原因：你最初的脚本是给页面加载时已经存在的评论元素绑定了检测逻辑，但当comments div刷新后，新生成的评论元素根本没被绑定这些逻辑，自然就失效了。你说想每秒重载脚本，这个方法能work，但效率有点低，我给你两种方案，一种是更优雅的，一种是贴合你需求的：

方案一：事件委托/ DOM变化监听（推荐） #

这种方法不用反复重载脚本，一劳永逸。核心思路是把监听绑定到不会被刷新的父元素上，或者监听DOM的变化，这样新元素一出现就能被检测到。

情况1：监听发布动作 #

如果你的空白评论检测是在用户点击发布按钮时触发，那把事件绑定到comments div本身就行：

// 给comments div绑定点击监听，捕获子元素的点击事件
document.getElementById('comments').addEventListener('click', function(e) {
  // 确认点击的是发布按钮（假设按钮类是submit-comment）
  if (e.target.matches('.submit-comment')) {
    const input = document.querySelector('.comment-input');
    const commentText = input.value.trim();
    if (!commentText) {
      e.preventDefault(); // 阻止空白评论提交
      // 如果已经生成了空白评论元素，直接删掉
      const blankComment = document.querySelector('#comments .comment-item:empty');
      blankComment?.remove();
    }
  }
});

情况2：检测新增的空白评论 #

如果评论是自动加载/刷新出来的，用DOM观察者来监听新元素：

const commentsContainer = document.getElementById('comments');
// 创建一个观察者，监听子元素添加
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      // 检查是不是评论元素（假设评论类是comment-item）
      if (node.classList?.contains('comment-item')) {
        const content = node.textContent.trim();
        if (!content) node.remove();
      }
    });
  });
});
// 启动观察者，只监听子节点变化
observer.observe(commentsContainer, { childList: true });

方案二：按你的需求实现每秒重载 #

如果你就想坚持每秒执行检测逻辑，那记得把检测逻辑封装成独立函数，避免重复绑定事件：

function clearBlankComments() {
  // 找到所有评论元素
  const allComments = document.querySelectorAll('#comments .comment-item');
  allComments.forEach(comment => {
    // 去掉空白字符后判断是否为空
    if (!comment.textContent.trim()) {
      comment.remove();
    }
  });
}

// 页面加载先跑一次
clearBlankComments();
// 每秒执行一次检测
setInterval(clearBlankComments, 1000);

不过这个方法的小缺点是不管有没有新评论，都会每秒跑一遍，有点浪费性能，但胜在简单直接，完全符合你最初的想法。

另外提个小建议：如果你的comments div是通过AJAX或者框架渲染刷新的，最好在刷新完成的回调里直接调用clearBlankComments()，比如：

// 假设这是你刷新评论的函数
function refreshComments() {
  fetch('/get-new-comments')
    .then(res => res.text())
    .then(commentHtml => {
      document.getElementById('comments').innerHTML = commentHtml;
      // 刷新完立刻检测空白评论，比定时器精准多了
      clearBlankComments();
    });
}

这样就不用依赖固定的1秒定时器，每次刷新完立刻执行，既准确又省性能～

内容的提问来源于stack exchange，提问作者Adam Tourgeman