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.

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 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.

Expand|Select|Wrap|Line Numbers

 <input id="Submit1" onclick="setGlobal();" type="submit" value="submit" />

<a href="#">Click Here</a>

My javascript is not working fo the below code

Expand|Select|Wrap|Line Numbers

 <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

Expand|Select|Wrap|Line Numbers

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

How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

re: How to find browser back button event is fired?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about