我正在一个为用户提供租赁设备报价和预订的网站上工作。如果用户在流程中执行了多个步骤并选择关闭浏览器或在完成之前导航离开,那么客户希望提供特别优惠。客户希望阻止窗口关闭并询问他们的电话号码,以便他们可以在有空时以更优惠的价格致电给他们。
我可以防止窗口关闭并防止浏览器导航离开。发生这种情况时,会显示一个 div,其中包含一些供用户提交的选项以及继续关闭窗口的选项。这一切都很好。问题是,如果用户刷新页面或点击后退或前进按钮,那么操作就会被阻止,就像用户正在关闭浏览器一样。但我不在乎他们是前进还是后退或刷新页面,因为这意味着他们仍在预订过程中。不幸的是,我无法区分这两种类型的事件。
我将一个函数附加到 onbeforeunload 事件以触发向用户发送消息。我正在处理的站点是一个 ASP.NET 站点,如果这对任何人都有帮助的话。
这是我正在使用的代码。当页面首次加载时,元素 divSecondClose 和 divThankYou 都设置为 display:none。<%=DisplayThankYou%> 在表单提交后设置为“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();
}
}
}