Checking an URL hash change in javascript

Here is a simple -framework less- way to get any URL hash changes in javascript. The system use in prior the onHashChange event (if this one exist), and roll back to a timer if not (this may append for old browser like IE7 or less, FF < 3.6…)

/* ************************************************************************

	Licence : LGPLv3

	Version: 0.1

	Authors: deisss

	Date: 2012-08-20

	Date of last modification: 2012-08-20

	Description: Hash change system catch with callback support

************************************************************************ */

/**
 * Detect any hash changes in URL
 * @param callback {Function} The callback to apply on any changes
*/
var onHashChange = function(callback){
	var __previousHash = null;
	var __callback = (typeof(callback) === "function") ? callback : null;

	/**
	 * Check for existing hash, call the callback if there is any change
	 * @param noCallback {Boolean} Indicate if the system should call the callback or not
	*/
	this.checkHash = function(noCallback){
		//Extracting hash, or null if there is nothing to extract
		var currentHash = (window.location.hash) ? window.location.hash.substring(1) : null;
		if(__previousHash !== currentHash){
			if(__callback !== null && noCallback !== true){
				__callback(currentHash, __previousHash);
			}
			__previousHash = currentHash;
		}
	}.bind(this);

	//Initiate the system
	this.checkHash(true);

	//The onhashchange exist in IE8 in compatibility mode, but does not work because it is disabled like IE7
	if(typeof(window.onhashchange) !== "undefined" && (document.documentMode === undefined || document.documentMode > 7)){
		//Many browser support the onhashchange event, but not all of them
		window.onhashchange = this.checkHash;
	}else{
		//Starting manual function check, if there is no event to attach
		setInterval(this.checkHash, 500);
	}
}

If you already use JQuery or prototype, this code may be useless because they are all implementing a hash tag check. Also, if you don’t have any bind function (for binding scope), you must get one (especially for internet explorer, recent Firefox got it by default), you can found a good one here.

To use this simple class, just start it as many times as you want (here I catch the onload event to start it when everything is ready for) :

window.onload = function(){
	new onHashChange(function(value, old){
		console.log("previous value : "+old);
		console.log("new value : "+value);
	});
}
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :