如何从 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:
beforeunload
(cancellable event)
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
})
我有一个应用程序(命名为 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 thebeforeunload
is sent. This event fires when a window is about tounload
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:
beforeunload
(cancellable event)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
})