Detecting browser event closing in Javascript
I've been working on a feature where the user must be prompted to take up certain action when he leaves a page by closing the browser window or by clicking an external URL,though I searched for the best possible solution but unfortunately couldn't find one.
The first thing that got my attention is the browser's "onbeforeunload" event and here is the implementation of it,
window.onbeforeunload=confirmExit;
function confirmExit(){
return "Do u want to close this page?"
}
So here the user will be prompted when he clicks the close button of the browser and when the user clicks "cancel" in prompt, it stays the same page.So far works fine.
When testing is on the way , suddenly problems getting piled up and I need to reconsider the solution above, since the requirement is to "prompt the user only when he leaves the current domain (website)" and here for the above code, the user is prompted whenever he clicks any of the links that points to other pages in the same website.
So the above code is to prompt the user, whenever he leaves the current page by refreshing it or by clicking the close button.But this was not what I wanted to implement.
So the user should not be prompted whenever,
1.An link to the same website is clicked
2.Refreshes the current page
3.Clicks mailto anchors
4.clicks the navigators containing "#" for the same page
Now to avoid these conditions, we need the anchors to be tested for the pages of the current website and external links. So the following code solves all of these problems and prompts the user only when ,
1.He clicks an external link
2.Closes the current window.
window.onbeforeunload = confirmExit;
var aClick=false;
function confirmExit(e)
{
if(document.all)e = event;
if(!e)e=window.event;
if (e)
{
if(aClick==false && (e.target==document || e.clientX<0 || e.clientY<0)){
return "You have attempted to leave this page. Are you sure you want to exit this page?";
}
}
}
The following code should be strictly placed below all the contents of the current page .
function setAClick(){
aClick=true;
}
function cancelAClick(){
aClick=false;
}
var aList=document.getElementsByTagName("a");
if(aList && aList.length>0){
for(i=0;i < alist.length;i++){
var a=aList[i];
if(checkForLocal(a.href)){
a.onclick=setAClick;
}else{
a.onclick=cancelAClick;
}
}
}
function checkForLocal(src){
return (src.indexOf("localhost")!=-1 ||
src.indexOf("urdomain")!=-1 || src.indexOf("javascript")!=-1 ||src.indexOf("mailto") !=-1 || src.indexOf("#")==0);
}
This eliminates all the above problems and confirms with the user only when navigating to the external URL's or closing the browser. :)
And may be this is an really odd solution for this problem and your comments are always expected. :)
The first thing that got my attention is the browser's "onbeforeunload" event and here is the implementation of it,
window.onbeforeunload=confirmExit;
function confirmExit(){
return "Do u want to close this page?"
}
So here the user will be prompted when he clicks the close button of the browser and when the user clicks "cancel" in prompt, it stays the same page.So far works fine.
When testing is on the way , suddenly problems getting piled up and I need to reconsider the solution above, since the requirement is to "prompt the user only when he leaves the current domain (website)" and here for the above code, the user is prompted whenever he clicks any of the links that points to other pages in the same website.
So the above code is to prompt the user, whenever he leaves the current page by refreshing it or by clicking the close button.But this was not what I wanted to implement.
So the user should not be prompted whenever,
1.An link to the same website is clicked
2.Refreshes the current page
3.Clicks mailto anchors
4.clicks the navigators containing "#" for the same page
Now to avoid these conditions, we need the anchors to be tested for the pages of the current website and external links. So the following code solves all of these problems and prompts the user only when ,
1.He clicks an external link
2.Closes the current window.
window.onbeforeunload = confirmExit;
var aClick=false;
function confirmExit(e)
{
if(document.all)e = event;
if(!e)e=window.event;
if (e)
{
if(aClick==false && (e.target==document || e.clientX<0 || e.clientY<0)){
return "You have attempted to leave this page. Are you sure you want to exit this page?";
}
}
}
The following code should be strictly placed below all the contents of the current page .
function setAClick(){
aClick=true;
}
function cancelAClick(){
aClick=false;
}
var aList=document.getElementsByTagName("a");
if(aList && aList.length>0){
for(i=0;i < alist.length;i++){
var a=aList[i];
if(checkForLocal(a.href)){
a.onclick=setAClick;
}else{
a.onclick=cancelAClick;
}
}
}
function checkForLocal(src){
return (src.indexOf("localhost")!=-1 ||
src.indexOf("urdomain")!=-1 || src.indexOf("javascript")!=-1 ||src.indexOf("mailto") !=-1 || src.indexOf("#")==0);
}
This eliminates all the above problems and confirms with the user only when navigating to the external URL's or closing the browser. :)
And may be this is an really odd solution for this problem and your comments are always expected. :)
Comments
Still trying hard. The above code comes near to my requirements.....But...
Hope somebody can clarify a little bit more.....
Both FFox and IE work fine with internal links (Anchors), even when I click an internal link and then the browser back button, no alert is displayed, ok.
But both also alerts when I click on the refresh button... :-(
FFox popps up an alert window when:
1. Navigate away from the page through a link
2. Type another URL in the address bar and press enter
3. Click Back or Forward button
4. Click the Close (X) button in the top-rightmost corner of the browser
5. Click on File Menu and choose Close.
6. Press Alt+F4 key
Everything fine...
IE is buggier and popps up an alert when:
1. Type another URL in the address bar and press enter
2. Click Back or Forward button
3. Click the Close (X) button in the top-rightmost corner of the browser.
But it shows no warning when:
1. Navigating away from the page through a link
2. Press Alt+F4 key
3. Clicking on the IE-Icon on the top-leftmost corner of the browser and chosing 'Close'.
Another curious thing is that the displayed alert window contents looks like this:
----------------------------------------------------------------
Stai per lasciare questa pagina.
[returned string von the confirmExit function, in this case "You have attempted to leave this page. Are you sure you want to exit this page?"]
Premi OK se sei sicuro di voler uscire uscire?
----------------------------------------------------------------
The alert windows already offers a message in the browser's or system's language. It looks like you dont need so send a return string if you dont want to, only true :-)
I hope it helps.
Ciao
your js code working fine. But whenever I clicked broswer Refresh or Back button it's giving window close message.
How to solve this?
Thanx
for(i=0;i < alist.length;i++){' (should be aList), i found it to not be working if i just hit Refresh... I have no idea on how to make it work... Everything I read on this matter got me nowhere... This code is the best I've seen so far, but is useful only in a handful of situations... I recommend concentrating on the Server Side Code, though, to whoever thinks they need this code. Regards, Maskaro
thanks for your comments.Thanks Maskaro for the finding the bug in the code :).Since I didn't use any code formatter I couldn't help some misspellings when posting the code.I will try to format them properly soon :).
Anyways,
1.Displaying alert when refresh.
If the alert message is displayed , then i think there is some problem with the checkForLocal method. Make sure you have replace src.indexOf("urdomain") urdomain with the your website name or any keyword which identifies the page or website.
If you want to show an alert when you click refresh
When you are in your site and click refresh its gonna be in the same site right ? so why you want to give the user an alert for that!
The code aims in alerting the user when he tries leave the current website and tries to go to some other website from the same window or tab.I think it adheres to the purpose and its fine.
If you still want to display an alert, try to set a cookie and check whenever you load your site. But thats gone a be an extra round-trip checking where you have to check whether the site is loaded by refresh or a fresh load(loading for the first time).
2.Server side code?!!!!!
It strictly browser based and on the client side , why you want to load up your server for just a minor activity ? and do you mean any server-side scripting ?
3. No Alerts
window.onbeforeunload is going to prompt the user when you return a string from the attached function. If thats not gonna work for your browser try replacing return with an prompt or alert message based on your requirements , make sure it works all types of browsers
4.back button alert
If you get a back button alert then you might want to add check for window.back event also in the checkForLocal method.I think that might be a browser dependent.
Hope these comments helps in some way.Thanks for reading my post.
Since it's very hard to leave a page without deliberately acting to do so, I'm not following what the benefit is here, other than finding a way to lock someone onto a page in such a way that they can't get out--and that's very bad manners.
this code displays alert on every refresh in firefox 3. Do you have any solution.
jasmit
Thank you for your help.I tried to use your script on IE7 and Fire Fox and got working at IE7 but with Fox version 3.0.10 it is not working properly.The confirm Pop up displays when I click on any link to visit on the page.It should be displayed at the time of closing the browser tab or window.Please help me.. :)
Thanks
Ravi
this is working in mozilla on page refresh how to stop it
this is working in mozilla on page refresh how to stop it
In the above code, in case of Firefox 3.0.11, we are not able to determine the clientX, clientY property of the event. I have also tried screenX, pageX etc. Therefore I am not able to differentiate between a postback and window closing event.
Please help me in this regard.
var isClose = true;
document.onkeydown = checkKeycode;
function checkKeycode(evt)
{
var keycode =(evt.which) ? evt.which : event.keyCode;
//alert(" keycode"+keycode);
if(keycode == 116 || keycode == 82 || keycode == 17 ||keycode == 16)
{
isClose = false;
}
}
and change in the if clause
if(!aClick && (e.target==document || e.clientX<0 || e.clientY<0) && isClose)
Good if it helps someone.
Thank you dinesh for tweaking the code. Hope this helped.
@Anonymous1: I will try next time to put more my thought process and pros and cons of each. Thanks for sharing your view it's highly appreciated.
This was long time posted, and here is my thought of doing this.
We had a editor which loads in the page and user can edit documents, in the mean time if the user press the refresh keys by mistake we need to make sure whether user wants to leave the page or not. So I searched for a good solution never found and got interested in hacking the behaviour and got dirty :)
But all these years experience on the web, intrigues me about this solution. It's not advisable to keep someone is site unless you have a real need.
We have good alternatives, instead just showing nasty popups (OK! Just I made this work for my own interest and fun in exploring the possibility) , the possibilities are:
1. Use this feature ONLY in the pages if you think the user might in middle of something say user using a editor in your page and they choose by mistake/wantedly pressed the refresh button. We can make sure from the user.
2. For Shopping/e-commerce sites where you might have to follow a different approach about having it in the user session, and assisting them for unsaved data like Amazon, Gmail etc.,
3.You can use Rich client techniques to have your information stored using GWT/Gears/HTML5 etc., when the user visits your site next time.
So there are endless possibilities and oppurtunities to do this in a more elegant and effective way in terms of usability. I would like to see if anymore innovative thoughts can be implied here.
Thanks.
this information.
Look into my website google chrome themes