如何在SPA中实现iFrame内链接新开标签页时刷新主应用？

你的原有代码无法生效的核心原因：当内部应用在新标签页打开链接时，iframe自身的页面并未发生跳转，location.href不会产生变化，所以你用MutationObserver监听的DOM变更和location切换根本触发不了，自然无法通知主应用执行刷新。

下面分两种场景给出可行方案：

场景一：可以修改内部应用的代码 #

这是最稳妥的实现方式，直接在内部应用里拦截新标签页打开的操作，给主应用发送消息触发刷新：

内部应用代码（嵌入在iframe中的应用） #

// 拦截window.open方法
const originalOpen = window.open;
window.open = function(url, target) {
  // 检测是否为新标签页打开
  if (!target || target === '_blank') {
    // 给主应用发送消息（建议把*替换成主应用的具体域名，提升安全性）
    window.parent.postMessage({ type: 'NEW_TAB_OPENED' }, '*');
  }
  // 正常执行原window.open逻辑
  return originalOpen.call(this, url, target);
};

// 拦截所有target="_blank"的a标签点击
document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (link && link.target === '_blank') {
    // 给主应用发消息
    window.parent.postMessage({ type: 'NEW_TAB_OPENED' }, '*');
    // 保留原跳转逻辑或自行处理均可
  }
});

主应用代码（嵌入iframe的SPA） #

// 监听内部应用发来的消息
window.addEventListener('message', (event) => {
  // 验证消息来源，只处理指定内部应用的消息（替换成实际的内部应用域名）
  if (event.origin !== 'https://你的内部应用域名.com') return;
  
  if (event.data.type === 'NEW_TAB_OPENED') {
    // 触发主应用刷新
    window.location.reload();
  }
});

场景二：无法修改内部应用的代码 #

该方案仅适合同域环境（跨域会受同源策略限制，无法访问iframe内部资源），通过主应用直接操控iframe内部元素和方法：

const iframe = document.getElementById('你的iframeID');

// 等iframe加载完成后执行逻辑
iframe.onload = () => {
  const iframeWindow = iframe.contentWindow;
  const iframeDoc = iframe.contentDocument || iframeWindow.document;

  // 拦截iframe的window.open方法
  const originalOpen = iframeWindow.open;
  iframeWindow.open = function(url, target) {
    if (!target || target === '_blank') {
      // 触发主应用刷新
      window.location.reload();
    }
    return originalOpen.call(this, url, target);
  };

  // 给已存在的target="_blank"的a标签添加点击监听
  const existingLinks = iframeDoc.querySelectorAll('a[target="_blank"]');
  existingLinks.forEach(link => {
    link.addEventListener('click', () => window.location.reload());
  });

  // 监听iframe内新增的a标签，自动添加刷新监听
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'A' && node.target === '_blank') {
          node.addEventListener('click', () => window.location.reload());
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          const newLinks = node.querySelectorAll('a[target="_blank"]');
          newLinks.forEach(l => l.addEventListener('click', () => window.location.reload()));
        }
      });
    });
  });

  observer.observe(iframeDoc.body, { subtree: true, childList: true });
};

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