11544 sujets

JavaScript, DOM et API Web HTML5

Ancre > preventDefault();

Bonsoir,

Je cherche une solution dans mon code JS.
J'aimerais, lorsque que je clique sur un lien du type 
<a href="#_123">
, que l'url change dans la barre d'adresse du navigateur, mais qu'il ne suive pas le lien (qu'il n'aille pas jusqu'à l'ancre id=_123).

Quand j'utilise dans ma fonction :
e.preventDefault();

ou un 
return false;

le navigateur ne suit pas le lien, mais l'url sur le navigateur ne change pas.

Auriez-vous une solution ?

Merci Smiley smile 
window.history.pushState("object or string", "Title", "#mon-ancre");

en remplaçant #mon-ancre par le href que tu récupères.
Je ne sais pas si c'est crossbrowser.
Doc
Modifié par paolo (11 Sep 2012 - 20:44)
Y'a effectivement une meilleure compatibilité avec la solution location.hash. (et pushstate c'est l'api html5)
Modifié par paolo (12 Sep 2012 - 11:37)
paolo a écrit :
window.history.pushState(&quot;object or string&quot;, &quot;Title&quot;, &quot;#mon-ancre&quot;);

en remplaçant #mon-ancre par le href que tu récupères.
Je ne sais pas si c'est crossbrowser.
Doc


Super !
Il faut juste savoir que cette fonctionnalité n'est pas compatible avec les anciens navigateurs. Donc pour ma part, je l'ai intégré dans ma fonction de façon facultative.

Mais quoiqu'il en soit, le rendu est top !

Merci.
tm™ a écrit :
Salut,

Tu peux aussi essayer 
window.location.hash


tm


Cette méthode fonctionne également très bien.
Je pense donc prendre cette fonctionnalité qui a une plus grande compatibilité.

Pour ceux qui veulent le code avec un exemple :
<a href="#_123">Mon lien</a>

$('a').click(function (e) {
	var id = 123;

	// On annule l’évènement qui pointe vers l'ancre.
	e.preventDefault();	
			
	// HTML5
	// history.pushState(id,'ancre','#_'+ id);
	
	// Tous les navigateurs
	location.hash = '#_'+ id;
});


Merci à vous deux !
Sujet clos
Aller à