5

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

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

问题是：然后主/父应用程序有一个导航菜单。单击一个项目时，会创建一个 Iframe，其中 SRC ATTRIBUTE 加载 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 能否检测到何时卸载/销毁以首先触发 Ajax 中的保存设置？PS：我无权访问 App A 代码。

提前致谢

4

2 回答 2

6

来自MDN：

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

unload当文档或子资源被卸载时触发该事件。它在以下情况下被解雇：

  1. beforeunload（可取消的事件）
  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 iframebtn，iframe将从文档中删除但iframe.contentWindow.onbeforeunload不会调用。没有unload事件。

React 使用 js 渲染组件，所以完全像第二种情况，点击remove iframebtn。

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

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

于 2018-03-23T16:38:52.017 回答
0

unload event works so you can do

IframeWindow.addEventListener('unload', ()=>{
        debugger
      })
于 2021-10-26T10:30:43.470 回答