如何让Iframe内链接在父窗口打开且避免后退按钮异常

问题背景 #

嵌入iframe的应用中，点击iframe内链接时需要将父窗口URL更新为https://localhost:4200/ui/#/adaptive-ip?url=xxx格式（而非直接跳转链接原始地址），当前通过拦截点击事件+添加base标签实现了跳转需求，但点击浏览器后退按钮时出现异常：第一次点击iframe内容变化但URL不变，第二次点击URL变化但iframe内容不变，需两次操作才能退出页面。

问题原因 #

1. base标签设置target="_parent"，强制链接在父窗口打开，即使拦截了点击事件，仍会在浏览器历史栈中生成额外记录，导致URL与iframe内容的状态不一致。
2. 仅修改iframe内容和URL，但未通过history API同步历史状态，后退时浏览器无法同时匹配URL和iframe内容。

解决方案 #

1. 调整base标签配置 #

移除target="_parent"，避免默认跳转行为干扰历史记录生成：

function addBaseToIframe (iframe) {
  const baseElement = document.createElement('base')
  iframe.contents().find('head').append(baseElement)
}

2. 完整拦截iframe内链接点击 #

阻止默认跳转行为，手动同步URL、历史记录和iframe内容：

const iframeEl = document.getElementById('your-iframe-id');

// 监听iframe内的点击事件
iframeEl.contentDocument.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (!link?.href) return;

  e.preventDefault(); // 阻止链接默认跳转

  // 按你的规则生成目标URL参数（复用已有的adaptiveUrl逻辑）
  const originalPath = link.getAttribute('href');
  const newUrlParam = originalPath.replace(/^\/abc\//, 'abc/services/');
  const newParentUrl = new URL(window.location.href);
  newParentUrl.searchParams.set('url', newUrlParam);

  // 更新iframe内当前链接的href
  link.href = newParentUrl.href;

  // 添加新的历史记录，同步状态到浏览器
  history.pushState({ url: newUrlParam }, '', newParentUrl.href);

  // 同步更新iframe内容（根据你的实际逻辑，比如重新加载对应页面）
  // iframeEl.src = `your-iframe-base-url/${newUrlParam}`;
});

3. 监听popstate事件处理后退/前进 #

确保后退或前进操作时，URL与iframe内容同步更新：

window.addEventListener('popstate', (e) => {
  if (!e.state?.url) return;

  const targetParam = e.state.url;
  // 更新iframe内容到对应参数的页面
  // iframeEl.src = `your-iframe-base-url/${targetParam}`;

  // 可选：同步更新iframe内所有链接的href，保持全局一致性
  iframeEl.contentDocument.querySelectorAll('a').forEach(link => {
    const originalPath = link.getAttribute('href');
    const newUrlParam = originalPath.replace(/^\/abc\//, 'abc/services/');
    const newHref = new URL(window.location.href);
    newHref.searchParams.set('url', newUrlParam);
    link.href = newHref.href;
  });
});

4. 初始化同步状态 #

页面加载时，根据当前URL参数初始化iframe内容和历史状态：

window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search);
  const initialParam = params.get('url') || 'abc/services/evpn';
  
  // 初始化iframe内容
  // iframeEl.src = `your-iframe-base-url/${initialParam}`;

  // 替换初始历史状态，避免后退到无效状态
  history.replaceState({ url: initialParam }, '', window.location.href);
});

通过以上步骤，每次点击链接会生成一条正确的历史记录，后退/前进时会同时更新URL和iframe内容，解决两次点击后退的异常问题。

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