如何用JavaScript实现租房公告URL监控及符合条件的新通知推送？

当然可以用JavaScript搞定这个需求！我之前帮朋友折腾过类似的租房监控小工具，刚好能给你梳理清楚可行的思路、具体步骤，还有踩过的坑～

核心思路 #

本质就是定期请求目标租房公告页面，对比新旧内容，当检测到符合你设定条件的新公告时，触发浏览器通知（或者其他通知方式）。整个流程分成几个关键环节：定时请求、内容解析与对比、条件筛选、触发通知。

具体实现步骤（附示例代码） #

1. 定时请求页面内容 #

用递归的setTimeout来实现定时请求（比setInterval更靠谱，不会因为请求延迟导致任务叠加），通过fetch获取页面HTML：

// 递归定时检查，避免间隔偏移
function checkForNewRentals() {
  // 替换成你的目标租房公告URL
  fetch('https://example.com/rental-posts')
    .then(res => res.text())
    .then(html => {
      // 解析HTML为DOM对象，方便提取内容
      const parser = new DOMParser();
      const pageDoc = parser.parseFromString(html, 'text/html');
      
      // 提取所有公告项（这里假设公告的类是rental-item，需要根据目标页面调整）
      const allPosts = pageDoc.querySelectorAll('.rental-item');
      // 从本地存储取出已经监控过的帖子ID，避免重复通知
      const trackedPostIds = JSON.parse(localStorage.getItem('trackedRentalIds') || '[]');
      
      // 筛选出符合条件的新帖子
      const matchedNewPosts = Array.from(allPosts).filter(post => {
        // 假设每个帖子有唯一的data-id属性作为标识
        const postId = post.getAttribute('data-id');
        // 两个条件：没被监控过 + 符合你设定的租房要求
        return !trackedPostIds.includes(postId) && isMatchYourRequirements(post);
      });
      
      // 如果有符合条件的新帖子，触发通知并更新本地存储
      if (matchedNewPosts.length > 0) {
        sendNotifications(matchedNewPosts);
        // 更新已监控的帖子ID列表
        const newTrackedIds = [...trackedPostIds, ...matchedNewPosts.map(p => p.getAttribute('data-id'))];
        localStorage.setItem('trackedRentalIds', JSON.stringify(newTrackedIds));
      }
    })
    .catch(err => console.error('请求页面出错:', err))
    .finally(() => {
      // 5分钟后再次检查，可根据需求调整间隔（建议不要太短，避免被反爬）
      setTimeout(checkForNewRentals, 5 * 60 * 1000);
    });
}

2. 自定义你的筛选条件 #

写一个函数来判断帖子是否符合你的要求，比如价格、面积、位置这些：

function isMatchYourRequirements(post) {
  // 提取帖子里的关键信息（需要根据目标页面的DOM结构调整选择器）
  const price = parseInt(post.querySelector('.rental-price').textContent.replace('¥', ''));
  const area = parseInt(post.querySelector('.rental-area').textContent.replace('㎡', ''));
  const location = post.querySelector('.rental-location').textContent;
  
  // 示例条件：租金低于3500，面积大于60㎡，位置包含"XX商圈"
  return price < 3500 && area > 60 && location.includes('XX商圈');
}

3. 触发浏览器通知 #

利用浏览器的Notification API发送桌面通知，记得先请求用户权限：

function sendNotifications(posts) {
  // 检查通知权限
  if (Notification.permission === 'granted') {
    posts.forEach(post => {
      const title = post.querySelector('.rental-title').textContent;
      const content = `租金：${post.querySelector('.rental-price').textContent} | 面积：${post.querySelector('.rental-area').textContent}`;
      new Notification('找到符合要求的租房啦！', { body: content });
    });
  } else if (Notification.permission !== 'denied') {
    // 还没授权的话，请求权限
    Notification.requestPermission().then(perm => {
      if (perm === 'granted') sendNotifications(posts);
    });
  }
}

4. 启动监控 #

最后调用启动函数就行：

// 开始监控
checkForNewRentals();

注意事项（踩过的坑） #

• 跨域问题：如果直接在浏览器控制台或者普通网页运行代码，可能会遇到跨域报错（因为目标网站没开CORS）。解决办法：
  • 做一个简单的Node.js代理服务器，前端请求自己的代理再转发到目标URL；
  • 做成浏览器扩展（比如Chrome扩展），扩展的后台脚本不受跨域限制，适合长期稳定运行。
• 反爬机制：频繁请求可能被目标网站封IP，所以请求间隔别太短（建议5-10分钟一次），可以给fetch加个User-Agent头模拟浏览器请求：

  fetch('目标URL', {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
    }
  })
  

• 页面结构变化：如果目标网站更新了页面布局，你的DOM选择器（比如.rental-item）可能失效，需要定期检查调整代码。
• 持久化存储：用localStorage存储已监控的帖子ID，关闭浏览器再打开也不会重复通知。

两种常见的运行场景 #

• 书签脚本：把代码改成书签形式（书签URL开头写javascript:），打开目标页面后点击书签启动监控，但关闭页面就停止了，适合临时用。
• 浏览器扩展：做成后台运行的扩展，即使关闭标签页也能继续监控，长期使用更稳定。

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