How to find browser back button event is fired?

[bhappy]

Hi All,

Is there any way to find the event is browser back button click?

I need to show an alert when user clicks on browser back button? I tried using the following code but alert is showing for every event on this page.

window.onbeforeunload = function(evt)   
    {   
    if (typeof evt == 'undefined')    
    evt = window.event;    
       
  
        if(evt)   
        {   
           
        return "If you leave this page, your information will not be updated.";   
                  }   
    }

[RamananKalirajan]

Hi bHappy,

In IE, you can find with the help of PageX, PageY but in Mozilla its difficult to findout the click of browse button. Instead you can use the window.onbefore unload handler itself. You use this handler for only some pages where you want the user to save the datas are do something before he navigate to other page.

[bhappy]

Hi,
Thanks for ur reply,
I am using this code in only one page where i had save, update, cancel buttons and some links also available in left side menu. My problem is alert msg is showing if i click any link or button also.

Plz some body help me...

Thanks.

[Dormilich]

well, all these elements trigger this event (insofar the behaviour is correct). basicly pressing the back button is like using a link… maybe you can differentiate by the event target.

[bhappy]

Hi,
Thanks for ur reply.
Can u provide me any examples or sample code.

Thanks.

[Dormilich]

I would have to write some … don’t know when I’ve got time for that.

[bhappy]

Hi,
I modified my code like this:

var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++)
{    
    links[i].onclick = setGlobal;
}
function setGlobal()
 {    
    window.linkClicked = true;
 }
window.onbeforeunload = function() 
{    
    if (typeof window.linkClicked == 'undefined' || !window.linkClicked) 
    {        
    return "Are you sure?"   	
    }
}

It is working fine If page contains only links and buttons. But in my page i had some links, buttons and links under lists(<ul>).

For the below code my javascript is working fine.

<input id="Submit1" onclick="setGlobal();" type="submit" value="submit" />
<a href="#">Click Here</a>

My javascript is not working fo the below code

<ul>
        <li><a href="/ConsoleManagement/default.asp">Place An Order</a></li>
        <li><a href="/ConsoleManagement/history.asp">View Order History</a></li>
        <li><a href="/ConsoleManagement/profile.asp">Update My Information</a></li>
    </ul>

Plz any solution?

[Dormilich]

when do you call the script? (if you call it before the elements are created by the browser, the event doesn’t get attached)

[bhappy]

Few elements are creating after javascript, so my javascript is not working.
Thanks for ur idea.

[Dormilich]

usually any such thing that is to apply to elements or nodelists of the document should be triggered by the window.onload event (because you can be sure, that then all the elements exist).

[bhappy]

Hi,
Thanks for ur reply. Now my javascript is working fine. Other than this 'do u have any other solution'?

Thanks once again.

[Dormilich]

at last I’ve found a way to differentiate between a hardcoded link and the back button. apply the onbeforeunload event (window), use the click event (link) to remove the onbeforeunload event. because the back button is not part of the document and the click event being triggered before the onbeforeunload event, clicking on the back button cannot remove onbeforeunload.

[bhappy]

I could not able to understand what you are trying to say. Can you please explain me in detail. A piece of code will be better.

[Dormilich]

// execute onbeforeunload when leaving the page
// by whatever means (links, buttons, back, forward, reload, …)
window.onbeforeunload = function(evt)
{
	// do whatever you need here
}

// get the links (I used only one for demo)
var link = document.getElementById("test");

// remove the onbeforeunload event from the link
link.onclick = function() { window.onbeforeunload = null; }

now your beforeonload function/code is only triggered by back, forward, reload.

[bhappy]

Thanks for ur reply.
I have placed the javascript code at the bottom of the page.It is working fine, but my page will take 1 minute time to load, mean time if end user clicks back button then alert will not show, because javascript may/maynot be loaded.

If i place this code at the top of the page then for every event alert will show, because no controls are created yet.

Please provide me any solution.....

Thanks.