iPhone Safari中target="_blank"链接复用标签页且无跳转问题咨询

这个问题我之前做移动端项目时也踩过坑，确实是iOS Safari上一个挺恼人的默认行为——当用户返回你的页面（此时页面仍处于后台内存中），再次点击带target="_blank"的链接时，Safari会偷偷复用之前打开的空白标签页，而且不会自动跳转到这个新内容的标签，导致用户看起来点击后屏幕毫无变化。

下面给你几个经过验证的解决方案，按推荐程度排序：

1. 给每个链接设置唯一的target值 #

Safari复用标签的核心原因是所有链接都用了同一个_blank目标标识，我们给每个链接分配一个唯一的target值，就能让Safari认为是不同的目标，每次都新建独立标签页。

你可以用JavaScript动态处理页面上所有带target="_blank"的链接：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a[target="_blank"]').forEach(link => {
    // 基于链接的href生成唯一target值，避免重复
    const uniqueTarget = `_blank_${btoa(link.href).slice(0, 12)}`;
    link.setAttribute('target', uniqueTarget);
  });
});

这里用btoa把链接地址转成base64再截取部分字符，保证每个链接的target值唯一，你也可以用随机字符串、哈希值等其他方式生成标识。

2. 用window.open手动控制新窗口打开 #

放弃原生的target="_blank"属性，改用JavaScript的window.open方法来打开新标签，这种方式更可控，能绕过Safari的标签复用机制。

代码示例：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      // 在用户点击事件中调用window.open，不会被浏览器拦截
      window.open(link.href, '_blank');
    });
  });
});

注意：这个方法必须在用户主动触发的点击事件里调用，否则会被浏览器的弹窗拦截器阻止，而我们是直接绑定在链接的click事件中，完全符合浏览器的安全规则，不会被拦截。

3. 额外优化：添加rel="noopener noreferrer" #

虽然这不是解决当前问题的直接方案，但建议给所有target="_blank"的链接加上rel="noopener noreferrer"——既可以提高安全性（防止新页面通过window.opener访问原页面的敏感数据），也能避免一些潜在的浏览器行为异常。

最终的链接写法可以是这样：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">示例链接</a>

补充：为什么会出现这个问题？ #

本质上是iOS Safari为了节省设备内存，对后台标签页的数量和行为做了限制。当你的页面处于后台状态时，Safari会判定之前打开的空白标签是"可复用资源"，于是直接替换它的内容，而不是新建标签；同时因为原页面还在前台，不会自动切换到被替换的标签，导致用户看不到任何变化。

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