如何根据设备类型修改动态生成的Squarespace按钮跳转URL

核心问题排查 #

• 你原有代码的核心错误：getElementsByClassName方法仅支持传入单个类名作为参数，你传入空格分隔的多个类名无法匹配到任何元素，这也是你之前循环逻辑不生效的主要原因。如果需要用多个类名匹配元素，应该使用document.querySelectorAll('.sqs-block.button-block.sqs-block-button')
• 你绑定事件的逻辑仅覆盖了页面初始加载时已存在的元素，后续动态生成的按钮不会被自动绑定事件
• 直接判断e.target.nodeName == "a"的容错性较低，点击a标签内的文本节点时会匹配失败

推荐实现方案 #

方案1：点击时动态跳转（兼容性最好，适配所有动态生成场景） #

直接使用事件委托绑定到顶层稳定元素，不需要提前获取按钮元素，动态生成的按钮也能正常触发逻辑：

<script>
// 自定义设备判断规则，可根据需求调整
function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

document.addEventListener('click', function(e) {
  // 匹配点击的目标为Squarespace按钮元素
  const targetBtn = e.target.closest('.sqs-block-button-element');
  if (targetBtn) {
    // 阻止默认的原链接跳转
    e.preventDefault();
    // 根据设备类型设置对应跳转链接
    const jumpUrl = isMobileDevice() ? '替换为你的移动端跳转链接' : '替换为你的PC端跳转链接';
    window.location.href = jumpUrl;
  }
});
</script>

方案2：页面加载时直接替换所有按钮的href（用户hover时即可看到正确链接） #

如果需要提前替换按钮的href属性，可通过MutationObserver监听DOM变化，动态修改所有生成的按钮链接：

<script>
function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// 提前生成对应设备的目标链接
const targetUrl = isMobileDevice() ? '替换为你的移动端跳转链接' : '替换为你的PC端跳转链接';

// 监听DOM变化，自动替换所有新生成的按钮链接
const observer = new MutationObserver(() => {
  document.querySelectorAll('.sqs-block-button-element').forEach(btn => {
    if (btn.href !== targetUrl) {
      btn.href = targetUrl;
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});
</script>

方案说明 #

• 两个方案均不需要提前获取按钮父容器，适配所有动态生成的按钮场景
• 方案1逻辑更简单，性能开销更低；方案2用户体验更好，可在状态栏展示正确的跳转链接
• 你可以根据自己的实际需求二选一使用

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