Jan 302008
 

On my current project, we had a requirement to pop up a message to the user when they leave our site (e.g., close the browser window). We discovered a number of sites talking about a window.close event, but it is not supported in modern browsers (IE 6, Firefox 2, Safari 2). The closest event is an unload event which gets fired when the page is unloaded.

We tried using this event in a javascript file that is included on every page:

window.onunload = popup;
 
function popup() {
  alert('I see you are leaving the site');
}

Unfortunately, an unload event is fired when the user leaves the page for any reason (such as clicking on a link). We did not want to show the popup if the user clicked on a link which stayed on the site.

Our next idea was to add an onclick to every link which would turn off the popup. Then, if the user clicks a link, nothing happens. If they leave the site another way, they get the popup.

Toby Tripp had the great idea to add these onclicks dynamically in javascript. We use prototype, so the code looks like:

staying_in_site = false;
 
$$('a').each(function(link) {
  link.observe('click', function() {staying_in_site = true;});
});
 
window.onunload = popup;
 
function popup() {
  if(staying_in_site) {
    return;
  }
  alert('I see you are leaving the site');
}

This code creates a variable which determines whether or not to show the popup. Then, we find every link with $$(‘a’). This is a CSS selector which selects all of the a elements. We iterate over these links and add a listener which sets the staying_in_site flag to true. Now, our popup code checks this flag and knows whether the user is staying on the site.

It is important to include this javascript at the bottom of the file (and not in the head). The javascript must be executed after the page is written or the links will not exist yet.

This solution is not perfect, but it accomplishes most of what we need.

Update (1/31/08): Simon Stewart suggested a cleaner method in the comments:

staying_in_site = false;
 
Event.observe(document.body, 'click', function(event) {
  if (Event.element(event).tagName == 'A') {
    staying_in_site = true;
  }
});
 
window.onunload = popup;
 
function popup() {
  if(staying_in_site) {
    return;
  }
  alert('I see you are leaving the site');
}

Instead of attaching an event listener to every link, we can attach a click listener to the whole body. Now, any click will call our function, which checks to see if you clicked on a link. Since we are not iterating over existing links, this javascript does not have to be below the links in the page.

  28 Responses to “Popup when leaving website”

  1. Paul,

    I am trying to find a code so that when someone leaves my site, they get a pop up that asks them for their email and name.

    This can get me more and more subscribers. I have tried this before but now I can not find the code.

    Tal

  2. Nice solution!

    I found an annoying bug though: when I refresh the page it pops up the alert. Does anyone have a solution to this?

  3. Hello, I have a couple of questions about your solution (my js skills are poor so I apology if the questions look like silly)

    1- what exactly the script should do? does it open a popup when the user closes the browser tab? If so
    2- what have I to do in order to make it working? I copied the script at the end of my body page but nothing happens.

    Thanks and have a good 1!

  4. This seems to work fine. However, is there a way to make it not alert when the user hits the back or forward button? If the idea is to do a popup when the user leaves the site, not when he stays within the site, then showing her a popup when going back and forward is not desired.

  5. I have the same problem, whenever a user refreshes the page or clicks the back botton I get the alert. Was anyone seccussful in fixing this?

  6. JC, do you have the code in the body or in the head? If it is in the head, document.body is null. You should either move the code to the body or wrap it with a dom:loaded event: http://www.prototypejs.org/api/document/observe.

  7. if you’re responding to clicks on the document body, wouldn’t you need to add staying_in_site = false; inside the conditional in case the user clicks on some random bit of background on the page, so that afterwards, when the user really leaves the page (not via a link) the popup function will behave as desired?

  8. Conan, you are correct. I fixed the code sample.

  9. Sorry … have not much experience in js but I don’t understand how the code handles the submit.

  10. Nick,

    The click listener will catch all clicks, including submit buttons (input tags). So you can modify the line “Event.element(event).tagName == ‘A’” to something that checks if the element is an input button.

  11. When I moved the above code in to my site, I got the following error: element has no properties (prototype.js line 2244). Any thoughts as to what it could be?

  12. JC, can you give me more information? What line in your code (not prototype) is causing the error?

  13. That is the problem, I don’t know what line of code is causing the problem. I don’t know what the problem is. When I look at the stack it says the error is coming from this line:
    ERROR HERE->Event.observe(document.body, ‘click’, function(event) {
    if (Event.element(event).tagName == ‘A’) {
    staying_in_site = true;
    }
    });

    I stepped into the prototype function and it said that element is null.

  14. With Prototype, it’s easy to write the link behavior within the head using Event.oberve ( window, ‘unload’, … ). As Simon mentions (sorry, I couldn’t write “As Simon says” :-), then you’re not reliant on script position.

  15. Why not just attach a click listener to the body tag and check the original target to see if it’s a link? That’ll run faster, and means that you’re not relying on the location of the script in the page.

  16. How does your solutions handle forms? Do you have to register them in the same way?

  17. Anyone developed a script to STOP annoying sites trying to stop you leaving them ? They don’t actually stop me leaving they just slow me down for a split second and make sure I NEVER come back

  18. Could one of you that has successfully solved how to create a pop up when someone leaves your site please post the complete code … I work in javascript. Or email it to me. Thanks.

  19. I placed this code in my web page but it doesn’t works what is the reason , if anybody knows this please help me . its ruining my time..

  20. Hello,

    Is was very pleased when I found your page making it possible to display a “Popup When leaving a website” when visitors leave the site. I have placed the code at the bottom of my page located at “http://174.121.3.129/~darigunu/”, as required, and I must sadly conclude that it does not work for me. Most likely I’m doing something wrong. Can you please assist. When leaving the site the popup does nog show.

    Thanks in advance,
    Shirley

  21. I need to show a pop up i mean a HTML file with having some image when website leave what will be code for it. I tried on body unload but it appear again and again even if you are within site but leaving that page, that is annoying do any one have any solution?

  22. Do you guys know how irritating it is to have to click something to leave your site. Ever thought we are leaving because we no longer want to stay. So stop with it, guys, all it does is make a webuser NEVER go back to that particular site

  23. Guys,

    This isn’t a solution. If a user refreshes the page or hits a back button, they will get the popup. This will be complete if it solves that problem, which I believe is impossible.

  24. Simon, that’s a great idea. We just switched our implementation to what you suggested.

    Andy, Simon’s solution catches submit buttons as well.

  25. I know this post is rather old but I am looking to do this EXACT same thing with a more recent release of prototype but no matter how I try it I get an error about “element not defined”

    Could you update this code? You seem to be of the only sites online to provide such code and it is very useful for all sorts of applications.

  26. i try to using exitpopup , but i found same trouble in my page , have u complete js script ?

  27. Cool Paul and Toby. This is a nice trick. It saved me a lot of time.

  28. Shirley, it looks like you use mootools, but my example is for prototype (http://www.prototypejs.org/). You will have to convert my example. As a side note, I recommend you use firebug, since it showed me the error as soon as I opened your site.

Sorry, the comment form is closed at this time.