JavaScript获取a标签href、触发点击及定时检测跳转实现方法

已知前置信息 #

• 目标DOM结构

<h2 class="font120 mt0 mb10 mobfont110 lineheight20 moblineheight15"><a href="https://demosite.com">demo text</a></h2>

• 已验证的取值逻辑：通过class取到h2容器后，可直接获取内部包含的a标签内容

const y = document.getElementsByClassName("font120 mt0 mb10 mobfont110 lineheight20 moblineheight15")[0].innerHTML;
console.log(y);
// 输出：<a href="https://demosite.com">demo text</a>

具体需求 #

• 提取目标a标签的href地址并触发点击
• 每5分钟执行一次检测：如果href链接发生变化，自动点击新链接；如果链接未变化，刷新当前页面

可直接运行的实现代码 #

// 获取目标h2容器
const titleWrap = document.getElementsByClassName("font120 mt0 mb10 mobfont110 lineheight20 moblineheight15")[0];
// 存储初始链接地址
let storedHref = titleWrap.querySelector('a').href;
// 页面加载后首次触发链接点击
titleWrap.querySelector('a').click();

// 启动5分钟周期的检测任务
setInterval(() => {
  const currentLink = titleWrap.querySelector('a');
  // 异常兼容：如果a标签不存在直接刷新页面
  if (!currentLink) {
    location.reload();
    return;
  }
  const latestHref = currentLink.href;
  if (latestHref !== storedHref) {
    // 链接更新，同步存储值后点击新链接
    storedHref = latestHref;
    currentLink.click();
  } else {
    // 链接无变化，刷新当前页面
    location.reload();
  }
}, 300000); // 300000毫秒 = 5分钟

实现说明 #

• 没有用正则从innerHTML字符串里切割链接，直接通过DOM原生的querySelector取a标签的href属性，兼容性和稳定性更高，不会受a标签额外加属性、属性顺序变化的影响
• 增加了异常兜底逻辑，避免页面结构变动导致a标签丢失时脚本报错中断
• 页面首次加载时就会执行第一次点击，不需要等第一个5分钟检测周期
• 定时时长用明确的毫秒值配置，也可以写成5 * 60 * 1000提升可读性，效果完全一致

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