如何从IFrame内部触发beforeunload事件，实现销毁前数据保存

我完全懂你的困扰——父应用是React单页应用，切换路由时直接把嵌着App B的IFrame从DOM里删掉，子应用的beforeunload根本触发不了，因为父页面压根没刷新。好在你们两个应用同源（都是https://mydomain下的），不用改父应用代码也能搞定，给你几个实用方案：

方案1：改用unload事件 + sendBeacon #

你之前用的beforeunload是针对页面刷新或跳转的，但IFrame被DOM移除时，子窗口的unload事件是会触发的。不过要注意，普通异步请求在unload里容易被浏览器中断，推荐用Navigator.sendBeacon，它专门处理这种卸载时的异步提交：

window.addEventListener("unload", function() {
  // 把表单数据转成JSON字符串
  const formData = JSON.stringify(yourFormValues);
  // sendBeacon会在后台发送，不阻塞页面卸载
  navigator.sendBeacon('/api/save-settings', formData);
});

方案2：定期检查自身IFrame是否存在 #

利用同源优势，App B可以直接访问父页面的DOM，定期检查承载自己的IFrame还在不在：

let existenceChecker = setInterval(() => {
  try {
    // 定位父页面中指向App B的IFrame
    const myFrame = window.parent.document.querySelector('iframe[src*="/appB"]');
    if (!myFrame) {
      // 找不到IFrame了，说明要被销毁，触发保存
      saveUserInput();
      clearInterval(existenceChecker);
    }
  } catch (err) {
    // 兜底：万一出现权限问题（虽然同源不会），停止检查
    clearInterval(existenceChecker);
  }
}, 300); // 检查间隔可根据需求调整，比如300ms或500ms

function saveUserInput() {
  const formData = JSON.stringify(yourFormValues);
  navigator.sendBeacon('/api/save-settings', formData);
}

这个方法能在IFrame被移除前的检查周期内触发保存，比unload更提前一点。

方案3：监听父页面的路由变化 #

既然父应用是SPA，路由切换时URL大概率会变，App B可以监听父页面的URL变化或者popstate事件：

// 方式一：监听popstate事件（很多SPA路由切换会触发这个）
window.parent.addEventListener('popstate', () => {
  saveUserInput();
});

// 方式二：定期对比父页面URL
let lastParentUrl = window.parent.location.href;
setInterval(() => {
  const currentUrl = window.parent.location.href;
  if (currentUrl !== lastParentUrl) {
    lastParentUrl = currentUrl;
    saveUserInput();
  }
}, 300);

这个方案适合父应用路由切换时URL有明显变化的场景，能提前感知到切换动作。

重要提醒 #

• 一定要用sendBeacon：普通的fetch或XHR在卸载事件中很容易被浏览器取消，sendBeacon是浏览器专门为这种场景优化的，兼容性也覆盖了绝大多数现代浏览器。
• 所有方案的前提是同源：你的两个应用都在https://mydomain下，所以能直接访问父页面的DOM和事件，如果是跨域的话这些方法就用不了，但你的场景完全符合要求。

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