Detecting Back Button/Hash Change in Url

Detecting Back Button/Hash Change in URL

Use the jQuery hashchange event plugin instead. Regarding your full ajax navigation, try to have SEO friendly ajax. Otherwise your pages shown nothing in browsers with JavaScript limitations.

Javascript/jQuery detect hash change only on browser back/forward button click

Take a look at the window.onhashchange event.

It is not currently supported in all browsers however. Take a look at the BA jQuery Hash Change Plugin here. It may work, if you choose to use a plugin in the end.

I hope this helps!

How distinguish between browser back and user manually changing location hash

Yes, you can distinguish between:

1. Clicking the back()/forward() browser button, and
2. Manually editing the location.hash in the browser URL bar

It is also possible to use both alongside in-page HTML element navigation.

Issues:

1. Browser back(), forward() and go() calls do not immediately update location.hash. It is required to wait ~10ms via setTimeout() to let browser finish the navigation and update location.

Solution (pseudo-code):

• Maintain an array of backward_history_hashes (note 'backwards' means logically, not temporally)
• Maintain a value of current_location.hash
• Maintain an array of forward_history_hashes
• Maintain a boolean flag for in-page navigation, default to FALSE
• Maintain a boolean flag whether to ignore_hash_change
• Create a setTimeout() monitor to check for location.hash changes

In each case, the history arrays are simple string arrays of location.hashes

on_in_page_navigation()

• set in_page_flag = true
• trigger browser navigation via back(), forward() or go(N)
• set in_page_flag = false

on_location_hash_change()

• set ignore_hash_change = true
• if( ! in_page_flag) rewrite_browser_history()
• display content corresponding to new location.hash
• set ignore_hash_change = false

rewrite_browser_history()

• just assume that it was a manual URL edit, and use JS history arrays to trigger back() and forward() calls to generate the desired browser-history
• execute go(N) to desired location.hash to synchronize browser-history with JS history arrays

Hash changed in url in IE9 for browser back button

I'd suggest capturing the backspace button, which most people use to go back and to make for IE users only special back buttons, similar to those of ie9, so their instinct will be to use those.

<!--[if lte IE 9]>
   html code for IE users, explaining why they are ignorant... giving them a back button, catching the backspace key and using that....
<![endif]-->

prevent hashchange on back button

Nope, you can detect the hashchange as it happens with something like below, but you can't really detect it before it happens. If you need the hash before it changes you can just store it somewhere.

var myHash = document.location.hash;

$(document).on('hashchange', function() {
    if (myHash != document.location.hash) {
        //do something
    }
});

You can't really detect the back button either, and if it does'nt trigger a reload, onbeforeunload won't work either.

If this functionality is essential, you should consider trying the haschange plugin or the history plugin, as one of those would make this a lot easier, and let you control the browser history and back/forth.

---

Related Topics