1

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();
}
}
}
Rob
  • 21
  • 1
  • 3
  • 4
    -1 for abusing your power as a web developer. Spamming people is **NOT** an acceptable reason for keeping someone on a webpage. – zzzzBov Jan 18 '11 at 00:36
  • @zzzzBov, wish I could -1 your comment for making premature assumptions. It is a legitimate problem and not the same as spamming. A similar problem at a different company: many potential customers pull out of an application process because it is too long or confusing, so the company would like to offer a personal call if the user closes the window before the process is complete. That's doing a service if you ask me. – David Tang Jan 18 '11 at 00:44
  • 1
    The company should be aware that some (many?) users will not take kindly to a website that takes over their browser to keep them from leaving, and may actively take their business elsewhere as a result. Would they treat in-person customers the same way? ("I'm sorry sir, you may not leave the store until you give us your phone number.") – David Gelhar Jan 18 '11 at 01:08
  • @Box9 if the application is too long or confusing it's the developer/designer's fault. **That is no excuse** for annoying the user with a popup. When I leave a website, I want to leave. Don't try to change my mind. – zzzzBov Jan 18 '11 at 01:19
  • @zzzzBov then why does stackoverflow have a popup asking if you're sure you want to leave when typing an answer? It's all part of providing a whole experience and thinking for your users. Some application processes are just long, there's nothing you can change about that. I'm not saying that's the case for the OPs situation, but we shouldn't be all judgemental under limited knowledge, especially when the question is simply about programmming, not usability. – David Tang Jan 18 '11 at 01:36
  • @Box9 I chose my words poorly there: warning a user when they're about to lose data is a good reason for a popup, but you wouldn't need to know why they're leaving the page. Asking the users to provide more information is **not** a good reason for a popup. I should have emphasized the "annoying the user" part, rather than the "no excuse" part. A warning is not to annoy the user. – zzzzBov Jan 18 '11 at 01:45
  • @zzzzBov, well there is no way to actually stop a user from leaving a web page. They are all warnings. If you look at the OP's code, the only message he wants to pop up is this: "RATE CHANGE NOTIFICATION Would you take a moment before you leave to help us serve you better?" It just doesn't sound like spam to me. But sure, we can point the OP in the right direction by saying that there are probably better ways to do this. But giving -1 to the question and saying it is abuse of developer power is not necessary at all. – David Tang Jan 18 '11 at 01:56
  • @Box9 my spam-dar must be more fine-tuned than yours because that's exactly what he's doing. If you're not saving state/data, don't bother the user when they leave. It's that simple. – zzzzBov Jan 18 '11 at 02:02
  • @DavidTang it's been a long time and I now know the Original Poster "Rob". that is exactly what it is for, an internet advertising firm that allows you to put their ads. The ads, even if accidently touched would force user to stay on the web page unless they generate a "lead" which is the phone number. Many simpletons would do that and then they are bombarded with phone calls. – Simple Fellow Dec 30 '20 at 05:29

1 Answers1

0

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.

Community
  • 1
  • 1
Macy Abbey
  • 3,877
  • 1
  • 20
  • 30