javascript - Pop-up when leaving website - Stack Overflow

admin管理员组

文章数量:1022695

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 es up when actually leaving the site.

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

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 es up when actually leaving the site.

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

• javascript
• jquery

Share Improve this question Follow asked Apr 24, 2015 at 18:23 CreateSeanCreateSean 1,38622 gold badges2121 silver badges4242 bronze badges 5

• 11 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 Commented Apr 24, 2015 at 18:27
• 1 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 Commented Apr 24, 2015 at 18:27
• 1 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 Commented Apr 24, 2015 at 18:30
• Possible duplicate: stackoverflow./questions/29408083/… – Dagriel Commented Apr 24, 2015 at 18:30
• @bhspencer I tried that already, no go. – CreateSean Commented Apr 24, 2015 at 18:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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

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.

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.

One way, and again, I wouldn't remend 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
});

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 es up when actually leaving the site.

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

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 es up when actually leaving the site.

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

• javascript
• jquery

Share Improve this question Follow asked Apr 24, 2015 at 18:23 CreateSeanCreateSean 1,38622 gold badges2121 silver badges4242 bronze badges 5

• 11 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 Commented Apr 24, 2015 at 18:27
• 1 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 Commented Apr 24, 2015 at 18:27
• 1 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 Commented Apr 24, 2015 at 18:30
• Possible duplicate: stackoverflow./questions/29408083/… – Dagriel Commented Apr 24, 2015 at 18:30
• @bhspencer I tried that already, no go. – CreateSean Commented Apr 24, 2015 at 18:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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

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.

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.

One way, and again, I wouldn't remend 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
});

本文标签： javascriptPopup when leaving websiteStack Overflow