Modifier l'URL courante sans changer de page

[Conrad]

Bonjour,

je m'excuse d'avance si ma question semble stupide, j'ai cherché plus amples informations sur ce forum (et sur Google), mais je n'ai rien trouvé pouvant m'apporter d'éléments de réponse.

Ma question est la suivante : est-il possible de modifier l'URL d'une page sans la recharger, et si oui, comment ?

Je sais coder principalement en PHP et Javascript(/AJAX), et je n'ai que peu de connaissance en Flash et/ou Flex.
Dans une application utilisant de l'AJAX, je souhaiterais modifier dynamiquement l'URL affichée par le navigateur (sachant que la page n'est pas rechargée). C'est impossible en Javascript, mais j'ai vu dans une vidéo que cela était possible en Flex, mais impossible de trouver comment. D'où ma question .

Merci d'avance pour toute aide que vous pourrez m'apporter.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[calimo]

Avec une ancre...

<a href="#blabla">

S'il n'y a pas d'ancre #blabla, il ne se passera rien.

Pourquoi vouloir modifier l'adresse ?

Quant à flex, il me semble que c'est un framework pour créer des applications, pas pour le web... ?

[Asumbaa]

Salut,

J'espère bien que faire plus n'est pas possible !! Ce serait une gigantesque faille de sécurité, bonjour le phishing

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Conrad]

En fait c'est pour que le client ne soit pas perdu s'il souhaite revenir sur le site plus tard.

Imaginons un site en Ajax de E-commerce :
- Je suis sur la page qui présente toute une gamme de chaussures pour homme.
- Je clique sur un filtre qui sélectionne les chaussure bleues.
- Le site fait la requête en Ajax et affiche directement le résultat du filtre sans recharger la page.
- Le lien de la page est toujours le même et donc si l'utilisateur met cette page en favori, il n'aura pas sa sélection avec les chaussures bleues, mais la sélection sans filtre.
- De même s'il utilise le bouton "back" du navigateur, il ne va pas retomber sur la sélection sans filtre, mais sur la page qu'il a utilisé avec d'arriver sur la page produit.

Je vais creuser l'utilisation des ancres, auxquelles je n'avais pas pensé, ça me parait parfait.

Effectivement, je n'avais pas pensé au problème de fishing qu'un changement d'adresse pourrait provoquer.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[calimo]

- Le lien de la page est toujours le même et donc si l'utilisateur met cette page en favori, il n'aura pas sa sélection avec les chaussures bleues, mais la sélection sans filtre.

Oui, c'est d'ailleurs bien un des gros problème d'ajax (avec d'autres, dont le bouton arrière cassé et le manque chronique d'accessibilité).

Le seul moyen de le contourner ce problème (mais les autres restent) est de faire comme google maps et de proposer un lien permettant de revenir dans l'état en cours (encore faut-il que l'utilisateur le voie, le comprenne et l'utilise).

[Invité]

Voilà j'ai fais un code à l'arrache ce matin pour voir s'il était possible de contourner ce problème avec les ancres, et ça marche.

Merci de votre aide. Je vais voir s'il y a moyen de gérer les back/next et ça sera parfait.

Vous pouvez tester là : http://hardcoresuicide.free.fr/scripts/produits.php

Voilà le code que j'ai fais (il est a améliorer grandement, c'était juste pour tester la faisabilité du truc) :

Code : Tout sélectionner

		<a href="javascript:addColor('bleue');">Lien pour sélectionner la couleur bleue</a><br>
		<a href="javascript:addColor('rouge');">Lien pour sélectionner la couleur rouge</a>
		<BR><BR>
		<DIV id="bleue" style="width:100px;height:100px;background-color:blue;display:none;"></DIV>
		<DIV id="rouge" style="width:100px;height:100px;background-color:red;display:none;"></DIV>

		<SCRIPT type="text/javascript">
			color_array = new Array();
			var ancres_list = window.location.href.split('#');
			var couleurs_list = ancres_list[1].split(':');
			var couleurs_array = couleurs_list[1].split(',');
			for (var couleur in couleurs_array) {
				// affiche les couleurs passées en ancre
				document.getElementById(couleurs_array[couleur]).style.display="block";
				color_array[couleurs_array[couleur]] = 1;
			}
			
			function addColor(color) {
				var color_line = '';
				if (color_array[color]) {
					// enlever la couleur
					color_array[color] = 0;
					document.getElementById(color).style.display="none";
				} else {
					// ajouter la couleur
					color_array[color] = 1;
					document.getElementById(color).style.display="block";
				}
				
				for (var color in color_array) {
					if (color_array[color]) {
						color_line += color+',';
					}
				}
				// recréé l'URL avec les ancres de couleurs
				color_line = color_line.substring(0,(color_line.length-1));
				if (color_line != '') {
					color_line = "#couleur:"+color_line;
				} else {
					color_line = "#";
				}
				window.location.href=color_line;
			}
		</SCRIPT>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Nicosmos]

Wikimapia arrive à changer son URL en direct (selon le lieu et le niveau de zoom): http://www.wikimapia.org. Et apparemment, c'est basé sur un système d'ancre. Il faudrait regarder plus en détail pour voir comment c'est fait

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[Conrad]

Oups, c'était moi, faudra que je m'enregistre sur ce forum

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[calimo]

Wikimapia arrive à changer son URL en direct (selon le lieu et le niveau de zoom): http://www.wikimapia.org. Et apparemment, c'est basé sur un système d'ancre. Il faudrait regarder plus en détail pour voir comment c'est fait

Ah oui c'est marrant

Mais ça ne permet quand-même pas l'utilisation du bouton de retour arrière, ce qui est étrange puisque l'adresse change...

[Conrad]

Oui, j'ai le même problème pour le moment,les navigateur ne gèrent pas les back/next comme étant un changement de page, quand la seule différence est une ancre.

Je ne sais pas s'il est possible de mettre un événement javascript sur l'appui du bouton précédent/suivant (je n'ai pas trouvé et je ne pense pas que cela existe), et donc à moins de vérifier en permanence que la page en cours soit la même que celle mémorisé, je ne sais pas comment faire.

Si je trouve je vous tiens au courant.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Conrad]

J'ai trouvé une astuce qui pour le moment ne me convient pas à 100% et qui ne marche pas sur Internet Explorer 6 (pas testé sur le 7), mais qui permet de faire des Précédent/Suivant qui fonctionne sur Firefox :

http://test5.market.in/ancre/produits.php

Code : Tout sélectionner

			current_hash = window.location.hash;
			
			checkPageback();
			setColor();
			
			function checkPageback() {
				if (window.location.hash != current_hash) {
					current_hash = window.location.hash;
					restartColor();
				}
				setTimeout("checkPageback()",100);
			}

Il s'agit juste d'un vieux système de timer qui vérifie si l'adresse change toute les 100ms, et si c'est le cas il refait la sélection des préférences passées en paramètre.

A voir comment faire fonctionner ça sous IE.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1