区分离开网站和使用 Javascript 刷新页面答案

【问题标题】：Distinguish between navigating away from the site and refreshing the page using Javascript区分离开网站和使用 Javascript 刷新页面
【发布时间】：2011-01-18 00:34:52
【问题描述】：

我正在开发一个为用户提供租赁设备报价和预订的网站。如果用户在流程中执行了多个步骤并选择关闭浏览器或在完成之前导航离开，那么客户希望提供特别优惠。客户希望阻止窗口关闭并询问他们的电话号码，以便在有空时以更优惠的价格致电给他们。

我可以阻止窗口关闭并阻止浏览器离开。发生这种情况时，会显示一个 div，其中包含一些供用户提交的选项以及继续关闭窗口的选项。这一切都很好。问题是，如果用户刷新页面或点击后退或前进按钮，那么操作就会被阻止，就像用户正在关闭浏览器一样。但我不在乎他们是前进还是后退或刷新页面，因为这意味着他们仍在预订过程中。不幸的是，我无法区分这两种类型的事件。

我将一个函数附加到 onbeforeunload 事件以触发向用户发送消息。我正在开发的网站是一个 ASP.NET 网站，如果这对任何人都有帮助的话。

这是我正在使用的代码。当页面首次加载时，元素 divSecondClose 和 divThankYou 都设置为 display:none。在表单提交后设置为“true”，以便显示感谢消息。

var showSecondCloseOnExit = true;
var displayThankyou = '<%=DisplayThankYou %>';
if (displayThankyou == true)
{
var divSecondClose = document.getElementById('divSecondClose');
divSecondClose.style.display = '';

var divThankYou = document.getElementById('divThankYou');
divThankYou.style.display = '';

showSecondCloseOnExit = false;
}
else
{
addListener(window, 'beforeunload', CloseWindowEvent, false);

var allLinks = document.getElementsByTagName('a');
for (var linkIndex = 0; linkIndex < allLinks.length; linkIndex++)
{
  addListener(allLinks[linkIndex], 'click', function(){showSecondCloseOnExit = false;}, false);
}
}

function CloseWindowEvent(e) {

if(!e) e = window.event;

if (showSecondCloseOnExit)
{
  var divSecondClose = document.getElementById('divSecondClose');
  divSecondClose.style.display = '';
  showSecondCloseOnExit = false;

//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'RATE CHANGE NOTIFICATION\nWould you take a moment before you leave to help us serve you better?';

//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
  e.stopPropagation();
  e.preventDefault();
}
}
}

【问题讨论】：

-1 滥用您作为 Web 开发人员的权力。向人们发送垃圾邮件不是让某人留在网页上的可接受理由。
@zzzzBov，希望我能 -1 您的评论以做出过早的假设。这是一个合法的问题，与垃圾邮件不同。另一家公司的类似问题：许多潜在客户退出申请流程，因为它太长或令人困惑，因此如果用户在流程完成之前关闭窗口，公司愿意提供个人电话。如果你问我，那是在做一项服务。
公司应该意识到，一些（很多？）用户不会善待接管他们浏览器以阻止他们离开的网站，因此可能会积极地将他们的业务转移到其他地方。他们会以同样的方式对待面对面的客户吗？（“对不起，先生，在您给我们您的电话号码之前，您不得离开商店。”）
@Box9 如果应用程序太长或令人困惑，那是开发人员/设计人员的错。 这不是用弹出窗口惹恼用户的借口。当我离开一个网站时，我想离开。不要试图改变我的想法。
@zzzzBov 那么为什么 stackoverflow 有一个弹出窗口询问您在输入答案时是否确定要离开？这都是为您的用户提供完整体验和思考的一部分。有些申请流程很长，您无法更改。我并不是说 OP 的情况就是这种情况，但我们不应该在知识有限的情况下做出判断，尤其是当问题只是关于编程而不是可用性时。

标签： javascript events navigation onbeforeunload back

【解决方案1】：

您是否尝试过嗅探事件的各种不同值： *类型 *目标元素 *鼠标位置

这是一个链接，其中包含有关访问这些信息的指导性信息。您也许可以通过以上的组合来弄清楚您想要什么，尽管在许多浏览器中检查所有情况似乎相当残酷。 http://www.quirksmode.org/js/events_properties.html#type

此外，请参阅这些文章以在窗口关闭时附加到事件，仅此而已： How to create popup window when browser close

但是，您也可以告知产品负责人您正在做什么，执行您所描述的功能的成本变得相当高。

注意：请参阅 Slak 的评论：How to capture the browser window close event?。这可能就是你所追求的。

【讨论】：