如何在 onbeforeunload 事件期间提取目标主机名

Question

当 he/she 试图离开我的 webapp 而 his/her 项目未保存时，我想警告用户。目前我不关心当前正在编辑的编辑框。我从会话中知道项目的脏状态。

我很快意识到，如果我为 window.onbeforeunload 设置一个功能，即使 he/sh 导航到我的网络应用程序中的另一个页面，它也会打扰用户。在这种情况下不需要干扰，会话仍然存在。

我尝试了来自 Fire onbeforeunload only when window is closed (includes working example)

的解决方案

window.onbeforeunload = function (e) {
    var targetHost = new URL(e.target.URL).hostname;
    if (targetHost != window.location.host)
        return "Project is unsaved!!!";
    else
        return null;
};

new URL(e.target.URL).hostname 结果（至少在 IE11 上）：

JavaScript runtime error: Object doesn't support this action

奇怪的是，我通过任何搜索都找不到任何关于 new URL(e.target.URL).hostname 的信息。

但同时我希望这不是不可能的，我不敢相信其他人没有经历过。

Answer 1

你的脚本有两个问题：

window.onbeforeunload = function (e) {
    var targetHost = new URL(e.target.URL).hostname;
    if (targetHost != window.location.host) {
        return "Project is unsaved!!!";
    else
        return null;
};

首先是你没有关闭你的if。第二个是IE显然不支持e.target.URL。您需要有一个 A 和 B 计划。

一个方案：适用于e.target.URL存在的情况。在这种情况下，您可以按照最初实施的方式处理这种情况，但使用上述语法修复。

B方案：适用于e.target.URL不存在的情况。对于这种情况，您应该假设用户离开了网站。您可以通过在用户使用您的控件进行导航时添加知识来改进该方法，例如，您知道给定的锚点将留在站点上。在这种情况下，您可以定义一个点击事件并将布尔值设置为 true（该布尔值的默认值应为 false...），以便稍后您的 onbeforeunload event 将知道您的用户即使使用 IE 也留在了网站上。

所以你需要这样的逻辑：

var targetHost = !!e.target.URL ? (new URL(e.target.URL).hostname) : ((myFlag) ? (window.location.hostname) : ("elsewhere"));

如何在 onbeforeunload 事件期间提取目标主机名

How to extract target hostname during onbeforeunload event

javascript

onbeforeunload

dom-events