web-dev-qa-db-fra.com

Comment changer dynamiquement l'URL sans recharger?

OK, c'est ce que j'essaie de faire (je pense que Google le fait aussi principalement):

Scénario A:

Dans la page /Main_Page Disons qu'il y a 3 sections. Lorsque l'utilisateur clique sur la section A "lien", le contenu de section A Est chargé via AJAX et intégré à la page.

Scénario B:

Lorsque /Main_Page/Section_A Est chargé, nous allons pratiquement à la même page (comme dans le scénario A) - /Main_Page Et chargeons Section A Via AJAX - comme avant.

Le problème:

Nous avons 2 pages résultantes identiques, mais l'URL est différente (dans le premier cas ce sera juste /Main_Page, Tandis que dans le second ce sera /Main_Page/Section_A).

Ce que je veux faire:

  • Dans le scénario A, après avoir chargé Section A Via AJAX, comment dois-je faire pour que l'URL apparaissant (dans la barre d'adresse du navigateur) soit /Main_Page/Section_A (Ou toute autre chose d'ailleurs), sans aucune sorte de redirection, rechargement de page, etc.?
javascripthtmlajax
29
Dr.Kameleon

Votre problème peut être résolu en implémentant API historique , en particulier en utilisant la méthode pushState() . Je recommande lire à ce sujet dans MDN . Il existe également une solution tout-en-un appelée History.js , elle vous aidera à l'implémenter facilement dans x-browser (elle reviendra aux hachages d'URL # si le navigateur ne le prend pas en charge).

Voici un exemple:

history.pushState('', 'New Page Title', newHREF);

Pas assez excité? Voici un démo qui vous encouragera à l'implémenter.

47
Adi

Je viens de trouver un tutoriel et cela a fonctionné pour moi,

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

j'ai obtenu le code ci-dessus de http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

10
Pavan Mehta