调用window.open时如何选取span标签属性并实现指定页面跳转与焦点控制

让我来帮你搞定这个问题，要达成你想要的效果——新标签页打开目标页面并保持焦点，同时原页面跳转至data-href链接但不抢焦点，我们需要修正原代码的语法错误，并调整窗口操作的顺序：

核心问题分析 #

原代码有两个关键问题：

• this.data-href 是错误的语法，无法正确获取data-href属性值，应该使用this.dataset.href或getAttribute('data-href')
• 直接连续调用window.open可能导致焦点控制不符合预期，且浏览器可能出现拦截问题

修改后的完整代码 #

<span 
  data-href="https://clkde.tradedoubler.com/click?p=300883&amp;a=3040124&amp;g=24628776" 
  class="BUTTON_NZV" 
  style="border-radius: 7px; color: #FFFFFF; font-family: Arial; font-size: 31px; font-weight: 600; padding: 15px; background-color: #1BC325; text-decoration: none; display: inline-block; cursor: pointer; text-align: center;"
  onclick="handleSpanClick(this);"
>OK</span>

<script>
function handleSpanClick(spanElement) {
  // 1. 获取data-href对应的链接
  const redirectUrl = spanElement.dataset.href;
  // 替换成你实际要在新标签页打开的目标页面URL
  const newTabTargetUrl = 'https://your-target-page-url.com';

  // 2. 先打开新标签页并立即设置焦点
  const newTab = window.open(newTabTargetUrl, '_blank');
  if (newTab) {
    newTab.focus();
  }

  // 3. 延迟执行原页面跳转，确保新标签页稳定获取焦点
  setTimeout(() => {
    window.location.href = redirectUrl;
  }, 100);
}
</script>

关键细节说明 #

• 正确获取data属性：用spanElement.dataset.href是HTML5标准的data属性读取方式，兼容性很好；如果需要兼容极旧浏览器，可以换成spanElement.getAttribute('data-href')。
• 焦点控制逻辑：先打开新标签页并调用focus()，再用setTimeout延迟原页面的跳转，给浏览器足够时间确认新标签页的焦点状态，避免原页面跳转时抢占焦点。
• 避免弹窗拦截：所有操作都在用户主动点击的事件上下文内触发，浏览器不会拦截这种合法的弹出窗口，放心使用。

自定义调整 #

如果你新标签页要打开的是固定链接，直接替换代码中的newTabTargetUrl即可；如果是动态生成的链接，可以根据你的业务逻辑修改这个变量的赋值方式。

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