实现按钮每次点击打开新标签页而非覆盖的技术方案问询

问题 #

我们开发的研究资源网站主页嵌入了Tableau仪表板，其中按钮均指向同一基础URL但带不同查询参数：

• Button1：www.oursite.com?measure=21
• Button2：www.oursite.com?measure=54
• Button3：www.oursite.com?source=41
• Button4：www.oursite.com?source=90

当前问题：首次点击按钮会打开新标签页，后续点击其他按钮会直接覆盖该标签页；且按钮位于嵌入式仪表板内，用户无法右键操作。需通过HTML或JavaScript实现每次点击都打开新标签页。

可行方案 #

1. 修改Tableau仪表板配置（优先推荐） #

若你有权限编辑Tableau仪表板，直接调整链接的打开规则：

• 编辑仪表板内的按钮/链接组件，将链接的目标设置改为「新窗口/新标签页」（对应HTML属性target="_blank"）。
• 若Tableau默认对同域名链接复用标签，可给每个链接设置唯一的target名称（如target="link_21"、target="link_54"），搭配rel="noopener noreferrer"保障安全。

2. JavaScript拦截处理（无法修改Tableau时使用） #

场景A：Tableau iframe与网站同域名

可直接操作iframe内部DOM：

// 获取嵌入的Tableau iframe
const tableauFrame = document.querySelector('iframe[src*="tableau"]');

// 等待iframe加载完成后处理内部链接
tableauFrame.addEventListener('load', () => {
  const links = tableauFrame.contentDocument.querySelectorAll('a');
  
  links.forEach(link => {
    // 移除原有可能重复的target属性，设置随机唯一的target名
    link.removeAttribute('target');
    link.setAttribute('target', `_tab_${Math.random().toString(36).slice(2, 10)}`);
    // 添加安全属性
    link.setAttribute('rel', 'noopener noreferrer');
  });
});

场景B：跨域嵌入Tableau（无法直接操作iframe DOM）

使用Tableau官方JavaScript API监听链接点击，这是跨域场景下最可靠的方案：
首先在页面引入Tableau API脚本：

<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

然后编写监听代码：

// 初始化Tableau仪表板
const vizContainer = document.getElementById('你的Tableau容器ID');
const vizUrl = '你的Tableau仪表板完整URL';
const vizOptions = {
  hideTabs: true,
  onFirstInteractive: () => {
    // 监听仪表板内的链接点击事件
    vizContainer.querySelector('.tableauViz').addEventListener('tableau-link-click', (e) => {
      const targetUrl = e.detail.url;
      // 用随机target打开新标签，避免复用
      window.open(targetUrl, `_tab_${Math.random().toString(36).slice(2, 10)}`, 'noopener noreferrer');
      // 阻止默认跳转，防止覆盖已有标签
      e.preventDefault();
    });
  }
};

new tableau.Viz(vizContainer, vizUrl, vizOptions);

场景C：HTML层面补充设置

若嵌入iframe时使用了sandbox属性，需确保允许弹出窗口，否则window.open会失效：

<iframe src="你的Tableau仪表板URL" sandbox="allow-popups allow-scripts allow-same-origin"></iframe>

注意：sandbox参数需按需配置，避免过度限制仪表板功能。

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