Question

如果用户通过关闭浏览器或使用浏览器using the following javascript的历史记录按钮离开页面，则需要警告用户：

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here'; 
};

但是我的网站上的链接和按钮应该可以正常工作。我怎样才能做到这一点？

Answer 1

首先想到的是设置一个变量，告诉您是否点击了链接：

var linked = false;

window.onbeforeunload = function(e) {
    if (!linked)
        return 'Ask user a page leaving question here'; 
};

document.addEventListener('click', function(e) {
    if (e.target.tagName === "A")
        linked = true;
}, false);

也就是说，在文档级别设置一个单击事件处理程序，用于测试单击的元素是否为锚点（或者您想要允许的任何其他内容），如果是，则设置变量。（显然，这假设您没有其他锚元素点击处理程序在较低级别停止事件传播。）

Answer 2

var linkClicked = false;
window.onbeforeunload = function(e) {
    if (!linkClicked){
        linkClicked = false;
        return 'Ask user a page leaving question here'; 
    }
};

$(document).ready(function(){
    $('a').click(function(e){
        linkClicked = true;
    });
});

显然，这依赖于JQuery将事件处理程序添加到所有链接，但您可以使用任何其他方法附加处理程序，包括如果您真的必须将onclick="linkClicked=true;"添加到页面上的每个链接。

修改

只是想指出，如果用户点击了一个不会重定向它们的链接（例如，链接标签链接到页面上的其他位置，或者返回false /阻止正在执行的默认操作），那么将linkClicked设置为true，随后任何基于浏览器的导航都不会被捕获。

如果你想抓住这个，我会建议在链接点击上设置超时，如下所示：

$(document).ready(function(){ $('a').click(function(e){ linkClicked = true; setTimeout(function(){ linkClicked = false; }, 500); }); });

这将允许在重置标志之前触发窗口卸载事件半秒钟，以便正确捕获将来的导航事件。这仍然不是完美的，但它可能不是必须的。

Answer 3

您可以使用window.onbeforeunload事件。

var check= false;

window.onbeforeunload = function () {
   if (!check) {
   return "Are you sure you want to leave this page?"
   }
}

function CheckBackButton() {
    check= true;
} 



referenceElement.addEventListener('onClick', CheckBackButton(), false);

Answer 4

我们确认提示没有？像这样？ Intercept page exit event

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

Answer 5

How to show the “Are you sure you want to navigate away from this page?” when changes committed?这可能会解决您的问题

如何防止浏览器按钮而不是链接导航？

5 个答案: