如何确定用户何时离开网页（不包括某些链接）

Question

情况： 我有一个包含两个表的 Grails 网页。一个表显示人员信息（包括某些标志），第二个表包含带有“添加按钮”的标志列表，允许用户向自己添加给定标志。

现在，有一个保存按钮，单击该按钮会将用户标志的当前“状态”推送到我们的数据库。因此，当用户尝试导航到网站的其他部分时，如果显示未保存的信息，我希望能够显示提示。通过使用每个标志存储的现有 isDirty 布尔值，这很容易。我可以循环遍历人的活动标志并检查它是否脏。如果此人至少包含 1 个脏标志，则在他们尝试离开时我需要显示提示，因为除非他们明确按下按钮，否则该数据不会被保存。

问题：有很多方法可以离开此页面。我正在使用 ，其中 checkForDirtyFlags() 是一个基本的 js 函数，用于检查任何脏标志。但事情是这样的 - 当用户添加或删除标志时，会导致页面重新加载，因为页面的设置方式是重定向到如下所示的 url：

"http://my.url/addFlag/123456"

然后控制器知道将 id 为 123456 的标志添加到当前人员。然而，这不会改变该人在网站中的位置，因为仍然呈现相同的页面（它只包含更新的表格）。所以基本上，当我看到带有 addFlag 或 removeFlag 的 URL 时，我不想提示用户是否确定要离开该页面，因为在用户看来，他们不会离开该页面。

问题：有什么方法可以确定onbeforeunload期间的目标是什么？这样我就可以在我的 javascript 中添加类似的内容：

function checkForDirtyFlag() {
    if( justAdding ) { //We are just adding a flag. No prompt necessary
        //Don't do anything
    }
    else if( justRemoving ) { //We are just removing a flag. No prompt necessary
        //Don't do anything
    }
    else { // In this case, we want to prompt them to save before leaving
        alert('You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?');
    }
}

如果有任何不清楚的地方，请告诉我，我会尽力澄清。

谢谢！

Answer 1

我认为您无法在卸载事件中获取目标位置。我要做的是将保存/提交按钮绑定到一个函数，该函数在按下按钮时禁用卸载事件，从而禁用提示。如果用户尝试通过按返回等方式离开，则会触发卸载事件。

Answer 2

为什么不立即将更改推送到数据库，而不必按下“保存”按钮，或者将它们存储在临时数据库中，以便在导航到站点的其他部分时不会丢失未保存的更改。

Answer 3

我不太确定我是否理解正确 - 但实际上您已经在那里写下了解决方案。为什么不在必要时从 onbeforeunload 中返回字符串消息呢？

例如：

window.onbeforeunload = function() {
    if( justAdding ) { //We are just adding a flag. No prompt necessary
        //Don't do anything
    }
    else if( justRemoving ) { //We are just removing a flag. No prompt necessary
        //Don't do anything
    }
    else { // In this case, we want to prompt them to save before leaving
        return 'You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?';
    }
};

如果您从该事件返回一个字符串值，浏览器将处理显示的模式对话框窗口。否则什么也不会发生。