Pop-up when leaving website

Question

I've been asked to have a pop-up when visitors leave the site asking them if they really want to leave. This pop-up will only show if their shopping cart has items in it.

I can easily limit the pop-up to when the cart has items, however the issue I'm having is that even clicking an internal link loads the pop-up - how can I have it so this only comes up when actually leaving the site.

<script language="JavaScript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "some message about leaving";
  }
</script>

I would consider telling your boss that there is no better way of antagonizing your users than showing them a popup when they try and leave the page. — bhspencer, Apr 24 '15 at 18:27
How do you know when they're leaving the site? The only option would be to attach a click handler to every link and detach the `onbeforeunload` if it's a link to the same domain. The better answer would be to work-flow your shopping cart and when the user's session timeouts, maybe send them a reminder email "Hey, you still have items in your cart". — Brad Christie, Apr 24 '15 at 18:27
When have you ever tried to leave a site, been shown a popup that says "do you really want to leave?" and decided not to leave? — bhspencer, Apr 24 '15 at 18:30
Possible duplicate: http://stackoverflow.com/questions/29408083/fire-onbeforeunload-confirm-alert-for-external-sites-only — Dagriel, Apr 24 '15 at 18:30

score 3 · Accepted Answer · answered Apr 24 '15 at 18:37

3

If a link is clicked, it will tell you in e.target.activeElement. You can check if it's a link there:

window.onbeforeunload = confirmExit;
function confirmExit(e)
{
    var $element = $(e.target.activeElement);
    if ($element.prop("tagName") !== "A") {
        return "some message about leaving";
    }
}

Note: You can add additional conditions checking $element.attr("href") to make sure it displays the message for links that aren't your site.

answered Apr 24 '15 at 18:37

David Sherret

101,669
28
188
178

Also, I agree with everyone who's saying you shouldn't do this, but I know sometimes developers don't get the last word or a client demands a specific functionality. If you can, try to convince them that an `onbeforeunload` event should only be used when the user is going to lose information they've entered. – David Sherret Apr 24 '15 at 18:53

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

Alright first of all: Don't do this. Please. It's super-annoying for users. Just make sure the shopping cart items are stored on the server or in a cookie so users can always go back to the site.

Looking at this related question: How can i get the destination url in javascript onbeforeunload event? it can't be done easily.

Instead of using onbeforeunload, either attach a click handler to external links on your site that shows the popup, or attach a click handler to all links that checks if the link is external or not.

Again, don't do this...

edited May 23 '17 at 12:14

Community

1
1

answered Apr 24 '15 at 18:32

Wouter Florijn

2,711
2
23
38

What about to prevent users from accidentally aborting a file upload? How would you solve it otherwise? – simon Jan 28 '20 at 12:49
@simon yes, there are definitely scenarios in which it makes sense. But the one mentioned in the question isn't one of them in my opinion. – Wouter Florijn Jan 29 '20 at 14:03

score 0 · Answer 3 · answered Apr 24 '15 at 18:28

0

You could get the URL of a clicked link item, and check if it's on the same domain. Put this in an if not statement, with the current code inside.

answered Apr 24 '15 at 18:28

Stanniebeer

89
10

score 0 · Answer 4 · answered Apr 24 '15 at 18:41

you'll have to control it to enable and disable the behavior, something like this:

<script>
  var beforeunload = function (event) {
    var message = 'some message about leaving';

    (event || window.event).returnValue = message; // Gecko + IE
    return message;                                // Webkit, Safari, Chrome...
  };

  document.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
      window.removeEventListener('beforeunload', beforeunload);
    }
  });

  window.addEventListener('beforeunload', beforeunload);
</script>

this is going to remove the beforeunload event whenever a link is clicked on the page.

score -1 · Answer 5 · answered Apr 24 '15 at 18:34

One way, and again, I wouldn't recommend doing this either - the user should be able to leave your site without receiving a warning - but you could unregister the event if a link has been clicked:

$('a').click(function() {
    window.onbeforeunload = null;
    return true; // continue
});

Pop-up when leaving website

5 Answers5