Question

我的网站上有一些页面，允许用户创建和编辑帖子。当用户在这些页面上时，我想在离开页面之前警告他们。我可以这样：

//Only warn if user is on a New or Edit page
if(window.location.href.indexOf("/new") !== -1 || window.location.href.indexOf("/edit") !== -1  {
            window.addEventListener('beforeunload', function (e) {
                e.preventDefault();
                e.returnValue = '';
            });

//Doing this again because I don't know which version is compataible with all browsers
            window.onbeforeunload = function (e) {
                e.preventDefault();
                e.returnValue = ''
            };
        };

在New或Edit页面上，form中的信息使用JQuery ajax提交到服务器。服务器返回一个URL，用户可以重定向到该URL以查看其发布/更新的结果，例如window.location.href = result;，其中result是从服务器发送回的URL。

运行该代码进行重定向时，用户将收到警告，警告他们即将离开其所在的页面。我不希望它在用户未执行的任何重定向/导航上执行此操作。在这种情况下，如何停止/删除警告？

更新：这不是重复的。这个问题询问如何防止beforeunload事件发生在用户未要求自己离开页面的重定向上。

Answer 1

由于您可能希望事件在某些情况下受约束，而在同一window内不受其他约束，因此您不仅需要将事件处理程序添加到window，而且还必须也应将其删除（在适当情况下），因为即使您更改document中加载的window的URL，也不会更改window本身：

function handleBeforeUnload (e) {
  e.preventDefault();
  e.returnValue = '';
}

//Only warn if user is on a New or Edit page
if(location.href.indexOf("/new") !== -1 || location.href.indexOf("/edit") !== -1  {
   window.addEventListener('beforeunload', handleBeforeUnload);
} else {
   // Remove the previously registered event handler (if any)
   window.removeEventListener('beforeunload', handleBeforeUnload);
}

Answer 2

如果要强制使用window.location.href进行导航，则应在导航之前禁用beforeunload事件监听器。

例如这样的东西：

function unloadHandler(e) {
  e.preventDefault();
  e.returnValue = '';
}
window.addEventListener('beforeunload', unloadHandler);

function forceNavigation(url) {
    // Remove the "are you sure you want to leave?" message, then navigate
    window.removeEventListener('beforeunload', unloadHandler);
    window.location.href = url;
}

致电forceNavigation('https://example.com')进行导航，而不会警告用户。

JS在这里摆弄：https://jsfiddle.net/o918wsam/1/

如何在离开页面之前警告用户，但不在重定向时

2 个答案: