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

发布于 2024-10-12 15:29:55 字数 1718 浏览 2 评论 0原文

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

我可以防止窗口关闭并防止浏览器离开。发生这种情况时,会显示一个 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();
}
}
}

I am working on a site that provides the user with quotes and reservations for rental equipment. If the user gets more than a few steps into the processes and chooses to close the browser or navigate away before finishing then the client would like to offer then a special deal. The client would like to prevent the window from closing and ask them for their phone number so they can call them with a better rate if one becomes available.

I can prevent the window from closing and the prevent the browser from navigating away. When this happens, a div is displayed with a little for for the user to submit and an option to go ahead and close the window. This all works fine. The problem is that if the user refreshes the page or hits the back or forward buttons then the action is being blocked just as if the user was closing the browser. But I don't care if they go forward or back or refresh the page because that means they are still in the reservation process. Unfortunately, I cannot distinguish between the two types of events.

I am attaching a function to the onbeforeunload event to trigger the message to the user. The site I am working on is an ASP.NET site, if that is helpful to anyone.

Here is the code I am using. The elements divSecondClose and divThankYou are both set to display:none when the page first loads. <%=DisplayThankYou%> is set to 'true' after the form has been submitted so that a thank you message appears.

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();
}
}
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

じее 2024-10-19 15:29:55

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

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

另外,请参阅以下文章,了解如何在窗口关闭时附加到事件,仅此而已:
如何在浏览器关闭时创建弹出窗口

但是,您可以还要告知产品所有者您正在做什么,执行您所描述的功能的成本变得相当高。

注意:请参阅 Slak 的评论:如何捕获浏览器窗口关闭事件?。这可能就是你所追求的。

Have you attempted to sniff the various different values of the event:
*type
*target element
*mouse position

Here is a link with instructive information on accessing each of these. You may be able to figure out what you want through a combination of the above, although the checking all the cases across many browsers seems quite brutal.
http://www.quirksmode.org/js/events_properties.html#type

Also, see these articles for attaching to an event when the window closes and that is all:
How to create popup window when browser close

However, you may also advise the product owner of what you are doing that the cost on doing the functionality you are describing is getting rather high.

NOTE: See Slak's comment here: How to capture the browser window close event? . It may be what you're after.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文