Question

我有一个应用程序（名称为B），它被另一个主应用程序（名称为A或父项）嵌入到iframe中。

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

问题：然后主/父应用程序有一个导航菜单。单击一个项目，创建一个使用SRC ATTRIBUTE加载App B的Iframe。

当用户点击应用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可以检测何时将被卸载/销毁以首先触发Ajax中的保存设置？ P.S：我无法访问App A代码。

提前致谢

Answer 1

来自MDN：

WindowEventHandlers.onbeforeunload事件处理程序属性包含发送beforeunload时执行的代码。当窗口即将unload其资源时，将触发此事件。该文档仍然可见，事件仍然可以取消。

当文档或子资源是时，会触发unload事件   被卸下。它被解雇：


beforeunload（可取消的活动）

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>

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

如果您尝试关闭此标签，则会调用removeIframeBtn.onclick和iframe.contentWindow.onbeforeunload。

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

React使用js渲染组件，因此点击remove iframe btn就像第二种情况一样。

因此，您的问题的答案是：在路由更改的单页应用程序中，无法检测到使用onbeforeunload事件卸载iframe。

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

如何触发＆＃39; beforeunload＆＃39;来自IFRAME的活动

1 个答案: