如何从 IFRAME 中触发 'beforeunload' 事件

How to trigger 'beforeunload' event from within an IFRAME

我有一个应用程序(命名为 B)正被另一个主应用程序(命名为 A 或父应用程序)嵌入到 iframe 中。

So: App A--                     // domain of A: https://mydomain/mainApp
           |___ App B in Iframe // domain in B: https://mydomain/appB

问题是:然后main/parent应用有一个导航菜单。一个项目,当被点击时,创建一个带有 SRC 属性的 Iframe,在里面加载 App B。

当用户点击应用程序A中菜单的另一个选项时,Iframe被销毁,React中的另一个内容视图出现,取代了Iframe。

执行此操作时,B 中用户在表单中键入的所有数据都消失了,因为我无法触发 B 中的保存事件。

我在 iframe 应用程序中添加了以下事件处理程序:

window.addEventListener("beforeunload", function (e) {

    // Trigger here the save settigns event inside B
});

但是以前的代码在用户浏览应用程序主菜单时永远不会触发。如我所见,App A 中的导航菜单在浏览器中更改 URL(但似乎是 SPA React.js 路由或类似路由,没有真正的重定向)。

问题是: Iframe 能检测到什么时候unloaded/destroyed 会先触发Ajax 中的Saving Settings 吗? P.S:我无权访问 App A 代码。

提前致谢

来自 MDN:

The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.

The unload event is fired when the document or a child resource is being unloaded. It is fired after:

  1. beforeunload (cancellable event)
  2. pagehide

示例:

<body>
    <input type="button" id="removeIframeBtn" value="remove iframe"/>
    <iframe id="iframe" src="http://localhost:8080/iframe.html"></iframe>
</body>

<script>
    const removeIframeBtn = document.getElementById("removeIframeBtn");
    const iframe = document.getElementById("iframe");

    iframe.contentWindow.onbeforeunload = function () {
        debugger;
    };

    window.onbeforeunload = function () {
        debugger;
    };

    removeIframeBtn.onclick = function () {
        iframe.remove();
    };
</script>

假设使用当前代码的页面在浏览器选项卡中打开。

如果您尝试关闭此选项卡,将调用 iframe.contentWindow.onbeforeunload

如果您尝试单击 remove iframe btn,iframe 将从文档中删除,但 iframe.contentWindow.onbeforeunload 不会调用。没有 unload 事件。

React 使用 js 渲染组件,所以它完全像第二种情况,点击 remove iframe btn。

所以你的问题的答案是:在路由更改的单页应用程序中,无法通过 onbeforeunload 事件检测到 iframe 的卸载。

您的解决方案是在每次更改时保存设置。

unload 事件有效,所以你可以这样做

IframeWindow.addEventListener('unload', ()=>{
        debugger
      })