点击target="_blank"外部链接时如何阻止原页面刷新？

可能的原因与解决方案： #

• 添加安全属性避免外部页面影响原页面
  给链接加上rel="noopener noreferrer"是跨域新标签页链接的标准安全做法，同时能避免部分浏览器中外部页面通过window.opener操控原页面导致的意外刷新。修改后的代码：

  <a style='text-decoration: none;' target="_blank" rel="noopener noreferrer" href="(link to the external web page)">Visit</a>
  

• 排查页面内的JavaScript干扰
  检查页面是否存在全局的click事件监听器，可能误触发了页面刷新。可以通过浏览器开发者工具的控制台排查：

  // 在控制台执行，点击链接时查看输出的目标元素
  document.addEventListener('click', e => console.log('点击目标:', e.target));
  

  如果发现有非预期的事件绑定，找到对应的代码并修改，避免阻止或篡改a标签的默认行为。

• 用JavaScript手动控制新标签页打开
  如果以上方法无效，直接通过JS阻止a标签默认行为，手动打开新标签页：

  // 给目标链接绑定点击事件
  document.querySelector('a[target="_blank"]').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    window.open(this.href, '_blank'); // 手动打开新标签页
  });
  

• 检查会话Cookie配置
  若原页面刷新后会话丢失，确认会话Cookie的SameSite属性是否设置合理（推荐设为Lax或Strict），避免跨域场景下Cookie失效。不过核心还是先解决原页面意外刷新的问题。

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