Changer l'URL dans le navigateur sans charger la nouvelle page en utilisant JavaScript

Comment pourrais-je avoir une action JavaScript qui pourrait avoir des effets sur la page actuelle, mais changerait également l'URL dans le navigateur, donc si l'utilisateur frappe recharger ou mettre en signet, alors la nouvelle URL est utilisée?

Ce serait également bien si le bouton de retour rechargeait l'URL d'origine.

J'essaie d'enregistrer l'état JavaScript dans l'URL.

Avec HTML 5, utilisez la history.pushStatefonction . Par exemple:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

et un href:

<a href="#" id='click'>Click to change url to bar.html</a>

Si vous souhaitez modifier l'URL sans ajouter une entrée à la liste des boutons de retour, utilisez history.replaceStateplutôt.

Si vous voulez qu'il fonctionne dans les navigateurs qui ne le prennent pas en charge, history.pushStateet history.popStatepourtant, la «vieille» façon est de définir l'identifiant du fragment, ce qui ne provoquera pas un rechargement de la page.

L'idée de base est de définir la window.location.hashpropriété sur une valeur qui contient les informations d'état dont vous avez besoin, puis d'utiliser l' événement window.onhashchange , ou pour les navigateurs plus anciens qui ne prennent pas en charge onhashchange(IE <8, Firefox <3.6), vérifiez périodiquement voir si le hachage a changé (en utilisant setIntervalpar exemple) et mettre à jour la page. Vous devrez également vérifier la valeur de hachage au chargement de la page pour configurer le contenu initial.

Si vous utilisez jQuery, il existe un plugin de changement de hachage qui utilisera la méthode prise en charge par le navigateur. Je suis sûr qu'il existe également des plugins pour d'autres bibliothèques.

Une chose à laquelle il faut faire attention est d'entrer en collision avec des identifiants sur la page, car le navigateur fera défiler jusqu'à n'importe quel élément avec un identifiant correspondant.

window.location.href contient l'URL actuelle. Vous pouvez y lire, vous pouvez y ajouter, et vous pouvez le remplacer, ce qui peut entraîner un rechargement de page.

Si, comme cela semble, vous souhaitez enregistrer l'état javascript dans l'URL afin qu'il puisse être mis en signet, sans recharger la page, l'ajouter à l'URL actuelle après un # et avoir un morceau de javascript déclenché par l'événement onload analyser le courant URL pour voir si elle contient un état enregistré.

Si vous utilisez un? au lieu d'un #, vous forcerez un rechargement de la page, mais comme vous analyserez l'état enregistré au chargement, cela ne sera peut-être pas un problème; et cela fera également fonctionner les boutons avant et arrière.

Je soupçonne fortement que ce n'est pas possible, car ce serait un problème de sécurité incroyable s'il l'était. Par exemple, je pourrais créer une page qui ressemble à une page de connexion à une banque et faire en sorte que l'URL dans la barre d'adresse ressemble à la vraie banque !

Peut-être que si vous expliquez pourquoi vous voulez faire cela, les gens pourraient suggérer des approches alternatives ...

[Modifier en 2011: depuis que j'ai écrit cette réponse en 2008, plus d'informations sont apparues concernant une technique HTML5 qui permet de modifier l'URL tant qu'elle est de la même origine]

Les paramètres de sécurité du navigateur empêchent les utilisateurs de modifier directement l'URL affichée. Vous pourriez imaginer les vulnérabilités de phishing qui en résulteraient.

Le seul moyen fiable de modifier l'URL sans changer de page est d'utiliser un lien interne ou un hachage. par exemple: http://site.com/page.html devient http://site.com/page.html#item1 . Cette technique est souvent utilisée en hijax (AJAX + histoire de préservation).

Lorsque je fais cela, j'utilise souvent des liens pour les actions avec le hachage comme href, puis j'ajoute des événements de clic avec jquery qui utilisent le hachage demandé pour déterminer et déléguer l'action.

J'espère que cela vous met sur la bonne voie.

jQuery a un excellent plugin pour changer l'URL des navigateurs, appelé jQuery-pusher .

JavaScript pushStateet jQuery peuvent être utilisés ensemble, comme:

history.pushState(null, null, $(this).attr('href'));

Exemple:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Utiliser uniquement JavaScript history.pushState() , qui modifie le référent, qui est utilisé dans l'en-tête HTTP pour les objets XMLHttpRequest créés après avoir modifié l'état.

Exemple:

window.history.pushState("object", "Your New Title", "/new-url");

La méthode pushState ():

pushState()prend trois paramètres: un objet d'état, un titre (qui est actuellement ignoré) et (éventuellement) une URL. Examinons chacun de ces trois paramètres plus en détail:

1. objet d'état - L'objet d'état est un objet JavaScript qui est associé à la nouvelle entrée d'historique créée par pushState(). Chaque fois que l'utilisateur accède au nouvel état, un événement popstate est déclenché et la propriété state de l'événement contient une copie de l'objet d'état de l'entrée d'historique.

   L'objet d'état peut être tout ce qui peut être sérialisé. Étant donné que Firefox enregistre les objets d'état sur le disque de l'utilisateur afin qu'ils puissent être restaurés après que l'utilisateur a redémarré son navigateur, nous imposons une limite de taille de 640 000 caractères à la représentation sérialisée d'un objet d'état. Si vous passez un objet d'état dont la représentation sérialisée est supérieure à celle-ci pushState(), la méthode lèvera une exception. Si vous avez besoin de plus d'espace que cela, nous vous encourageons à utiliser sessionStorage et / ou localStorage.

2. title - Firefox ignore actuellement ce paramètre, bien qu'il puisse l'utiliser à l'avenir. Passer la chaîne vide ici devrait être à l'abri des modifications futures de la méthode. Alternativement, vous pouvez passer un titre court pour l'état vers lequel vous vous déplacez.

3. URL - L' URL de la nouvelle entrée d'historique est donnée par ce paramètre. Notez que le navigateur ne tentera pas de charger cette URL après un appel à pushState(), mais il pourrait tenter de charger l'URL plus tard, par exemple après que l'utilisateur a redémarré son navigateur. La nouvelle URL n'a pas besoin d'être absolue; si elle est relative, elle est résolue par rapport à l'URL actuelle. La nouvelle URL doit être de la même origine que l'URL actuelle; sinon, pushState()lèvera une exception. Ce paramètre est facultatif; s'il n'est pas spécifié, il est défini sur l'URL actuelle du document.

Il existe un composant Yahoo YUI (Browser History Manager) qui peut gérer cela: http://developer.yahoo.com/yui/history/

La galerie de photos de Facebook le fait en utilisant un #hash dans l'URL. Voici quelques exemples d'URL:

Avant de cliquer sur «suivant»:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Après avoir cliqué sur «suivant»:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Notez le hash-bang (#!) Immédiatement suivi de la nouvelle URL.

Il y a un plugin jquery http://www.asual.com/jquery/address/

Je pense que c'est ce dont vous avez besoin.

Ce qui fonctionne pour moi, c'est - la history.replaceState()fonction qui est la suivante -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Cela ne rechargera pas la page, vous pouvez l'utiliser avec un événement javascript

Je me demandais si cela serait possible tant que le chemin parent dans la page est le même, seulement quelque chose de nouveau y est ajouté.

Donc, disons que l'utilisateur est sur la page: http://domain.com/site/page.html alors le navigateur peut me laisser faire location.append = new.html et la page devient: http://domain.com/site/page.htmlnew.htmlet le navigateur ne la change pas.

Ou laissez simplement la personne changer le paramètre get, alors allons-y location.get = me=1&page=1.

La page d'origine devient donc http://domain.com/site/page.html?me=1&page=1et elle ne se rafraîchit pas.

Le problème avec # est que les données ne sont pas mises en cache (du moins je ne pense pas) lorsque le hachage est modifié. C'est donc comme à chaque fois qu'une nouvelle page est chargée, alors que les boutons Précédent et Suivant d'une page non Ajax sont capables de mettre en cache les données et ne passent pas de temps à recharger les données.

D'après ce que j'ai vu, l'historique de Yahoo charge déjà toutes les données à la fois. Il ne semble pas faire de requêtes Ajax. Ainsi, lorsque a divest utilisé pour gérer différentes heures supplémentaires de méthode, ces données ne sont pas stockées pour chaque état d'historique.

mon code est:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

et action:

setLocation('http://example.com/your-url-here');

et exemple

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

C'est tout :)

Une réponse plus simple que je présente,

window.history.pushState(null, null, "/abc")

cela s'ajoutera /abcaprès le nom de domaine dans l'URL du navigateur. Copiez simplement ce code et collez-le dans la console du navigateur et voyez l'URL passer à " https://stackoverflow.com/abc "

J'ai eu du succès avec:

location.hash="myValue";

Il ajoute simplement #myValueà l'URL actuelle. Si vous devez déclencher un événement sur la page Charger, vous pouvez l'utiliser location.hashpour vérifier la valeur appropriée. N'oubliez pas de supprimer le #de la valeur retournée par location.hashexemple

var articleId = window.location.hash.replace("#","");