10

I want to alert() when browser's back or forward button is clicked or hash is changed in javascript. I have tried this solution and it is working but it is causing problems on other links in webpage and submit each request twice on any link click event.

Is there any solution to capture it without using setInterval() function? So I need to capture hash change or back/forward button click event? I need a simple javascript code/function/property that should work in all modern browsers.

Any solution ?

Thanks

Improve this question
1
  • I am working with Ajax and updating hash each time when an Ajax request is called. But when I use browser's back/forward button to go back/forward, hash is changed but page is not updated. So I want to capture this event and update page myself using hash url.. Commented Nov 21, 2011 at 7:51

4 Answers 4

Reset to default
14

Not a good idea

Can you rather explain the reasoning behind this? We've all been down this road of preventing backs/forwards and similar and mangling with browser functionality.

It turns out though it's better to obey to browser and write your application in that way so these things become irrelevant. And it's also true that browsers are locking more and more things to client javascript apps so it's highly likely your app is going to fail after (few) browser upgrades.

Go with HTML5

HTML5 History spec may be exactly what you're after. It's the way things should work and be done in regard to Ajax applications and browser0s back/forward functionality. I suggest you check it out. See a working demo that does this rather nicely.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@RobertKoritnik I don't see the downside of managing the hash event especially when you have an ajax app. You would actually be better off signaling to the browser that you're changing states with a hash event and a url that would point you to that state.
This is the new link for W3C HTML5 History spec http://www.w3.org/TR/html5/browsers.html#history
5

I believe this is the answer Robert Koritnik was looking for, I found it here: https://developers.google.com/tv/web/articles/location-hash-navigation

There is an event (window.onhashchange) that fires whenever the location hash has been updated or changed so all you have to do is set up an event handler using JavaScript to listen for this event and execute code based on the hash. This is basically how it is done:

function getLocationHash() { return window.location.hash.substring(1); } window.onhashchange = function(e) { switch(getLocationHash()) { case 'state1': execute code block 1; break; case 'state2': execute code block 2; break; default: code to be executed if different from case 1 and 2; } }

I have it working on my site: http://www.designhandler.com

It is all dynamically changing content. No ajax yet but when I am finished it will be. I still use the window.location.hash to keep track of the site states. If you navigate through the site and then begin to use the back forward buttons to navigate once the site is in the history it will change the states dynamically like if the user was actually clicking through the nav, rather than needing to reload the page afterward.

Improve this answer

Comments

3

It's this for hash or for redirection? What are you trying to do? This kind of action is usually highly intrusive.

You may want to try "onbeforeunload" event for this javascript before leaving the page

Edited

Actually, the link you provide is quite accurate.

var hash = location.hash; setInterval(function() { if (location.hash != hash) { hashUpdatedEvent(hash); } }, 100); function hashUpdatedEvent(hash) { switch(...); }

Your link duplicate action problem would be corrected if you change

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a> function someFuncion() { doWhatever(); location.hash = 'somethingwasdone'; } function hashUpdatedEvent(hash) { if(hash == 'somethingwasdone') { doWhatever(); } }

By just (update the hash and let the "event" handle the action) :

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a> function someFuncion() { location.hash = 'somethingwasdone'; } function hashUpdatedEvent(hash) { if(hash == 'somethingwasdone') { doWhatever(); } }
Improve this answer

1 Comment

I am working with Ajax and updating hash each time when an Ajax request is called. But when I use browser's back/forward button to go back/forward, hash is changed but page is not updated. So I want to capture this event and update page myself using hash url..
3

Javascript provide the event popstate to capture browser's back/forward button click event - 

window.addEventListener("popstate", function(e) { // if a back or forward button is clicked, do whatever, like alert or anything console.log('href => ', e.path[0].location.href); // href => https://testdomain.com/demos/material/admin-app/#!/app/dashboard console.log('hash => ', e.path[0].location.hash); //hash => #!/app/dashboard console.log('pathname => ', e.path[0].location.pathname); //pathname => /demos/material/admin-app/ });

Read more on popstate

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.