离开网站时弹出

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>

Answer 1

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...

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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