TS/JS实现按Ctrl点击链接开新标签且焦点留当前页面

首先明确：现代浏览器出于用户体验和安全考虑，会对脚本控制窗口焦点的行为做限制——尤其是用户主动触发的新标签页打开操作，浏览器通常会强制将焦点切换到新标签页，这是浏览器的默认安全策略，部分场景下脚本无法完全覆盖这个行为。

针对你的问题，可尝试以下两种调整方案：

方案一：延迟触发当前页面焦点 #

通过setTimeout延迟调用当前页面的focus()方法，避开浏览器的焦点优先级逻辑：

// 替换为你的链接元素选择器
document.querySelector('.ctrl-open-link').addEventListener('click', function(e) {
  if (e.ctrlKey) {
    e.preventDefault();
    const targetUrl = `/dashboard/agency/${c.id}`;
    const newTab = window.open(targetUrl, '_blank');
    // 延迟100ms让当前页面重新获取焦点，可根据浏览器适配调整时长
    setTimeout(() => {
      window.focus();
    }, 100);
  }
});

方案二：监听新标签页加载完成后再切换焦点 #

等待新标签页的页面加载完成后，再触发当前页面的焦点获取，避免页面加载过程中浏览器重新抢夺焦点：

// 替换为你的链接元素选择器
document.querySelector('.ctrl-open-link').addEventListener('click', function(e) {
  if (e.ctrlKey) {
    e.preventDefault();
    const targetUrl = `/dashboard/agency/${c.id}`;
    const newTab = window.open(targetUrl, '_blank');
    newTab.addEventListener('load', () => {
      window.focus();
    });
  }
});

关键限制说明 #

部分浏览器（如Chrome最新版本）会完全禁止脚本在用户主动打开新标签页后将焦点移回原页面，这是为了防止恶意网站劫持用户注意力。如果上述方案都无效，说明当前浏览器的安全策略不支持这种操作，此时只能接受浏览器的默认行为，或者通过其他交互方式替代（比如添加“在后台打开”的独立按钮，而非依赖Ctrl点击）。

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