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

[Dormilich]

what do you need to load for taking so long?

[bhappy]

Actually my page is built by 2 different projects (using virtual directory). Header and footer is common for all pages in the site. I had totally 22 web sites which have same functionality. So business logic code is placed in one separate project and all 22 projects are refering this common project. so i need to place my javascript at the bottom of the page because in footer also some hyper links are exists. So my page is taking some time to load.

Note: Technology is 'ASP'. (Viryually link 2 projects).

[Dormilich]

does that mean the server taking so long to compute some html or is it just a huge amount of pictures?

[bhappy]

We are appreciating your patience.
All controls in the page will populate dynamically, because all websites use the same asp page. Based on the domain name contents will be retrived from database. so it is taking some time to load the page.

[Dormilich]

then you should optimize your DB code. I never encountered such long delays (ok, I’m not having complex code, though)

[bhappy]

Here Heder and Footer is populated from one project and remaning contents are populated by another project, so it is taking some time.