Modifier l'URL dans le navigateur sans charger la nouvelle page à l'aide de JavaScript

Question

Comment pourrais-je avoir une action JavaScript qui pourrait avoir des effets sur la page en cours, mais aurait changez également l'URL dans le navigateur afin que si l'utilisateur clique sur recharger ou mettre en favori la nouvelle URL est utilisée?

Il serait également utile que le bouton Précédent recharge l'URL d'origine.

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

Answer 1

Avec HTML 5, utilisez la history.pushState . 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 du bouton Précédent, utilisez plutôt history.replaceState.

Answer 2

Si vous souhaitez que cela fonctionne dans les navigateurs ne prenant pas en charge history.pushState et history.popState encore, & "vieux &"; manière consiste à définir l'identifiant de fragment, ce qui ne provoquera pas de rechargement de page.

L'idée de base est de définir la propriété window.location.hash sur une valeur contenant toutes les informations d'état requises, puis utilisez le é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 vérifiez si le hachage a changé (avec setInterval par exemple) et mettez à 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, un plug-in de hachage utilisera la méthode de votre choix. le navigateur prend en charge. Je suis sûr qu'il existe aussi des plugins pour d'autres bibliothèques.

Une chose à ne pas oublier est la collision avec les identifiants de la page, car le navigateur fait défiler tous les éléments dont l'identifiant correspond.

Answer 3

window.location.href contient l'URL actuelle. Vous pouvez en lire, en ajouter, et le remplacer, ce qui peut provoquer le rechargement d'une page.

Si, comme cela semble être le cas, vous souhaitez enregistrer l'état de javascript dans l'URL afin de pouvoir l'ajouter à un signet, sans recharger la page, ajoutez-la à l'URL actuelle après un # et laissez un élément de javascript déclenché par l'événement onload analyser l'URL actuelle pour voir si elle contient l'état enregistré.

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

Answer 4

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

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

[Éditer en 2011: depuis que j'ai écrit cette réponse en 2008, plus d'informations ont été découvertes concernant un technique HTML5 permettant de modifier l'URL tant qu'il s'agit de la même origine]

Answer 5

Les paramètres de sécurité du navigateur empêchent les utilisateurs de modifier directement l’URL affichée. Vous pouvez imaginer les vulnérabilités d'hameçonnage qui pourraient en résulter.

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

Ce faisant, je vais souvent utiliser des liens pour les actions avec le hachage comme href, puis ajouter 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 le bon chemin.

Answer 6

jQuery dispose d'un excellent plug-in pour changer l'URL des navigateurs, appelé jQuery-pusher .

JavaScript pushState et jQuery peuvent être utilisés ensemble, par exemple:

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;
});

Utilisation uniquement de 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 la modification de l'état.

Exemple:

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

La méthode pushState ():

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

1. objet d'état & # 8212; L'objet state est un objet JavaScript associé à la nouvelle entrée d'historique créée par <=>. 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 state 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 le redémarrage de son navigateur, nous imposons une taille maximale de 640 000 caractères à la représentation sérialisée d'un objet d'état. Si vous transmettez à <=> un objet state dont la représentation sérialisée est supérieure à celle-ci, la méthode lève une exception. Si vous avez besoin de plus d’espace, nous vous recommandons d’utiliser sessionStorage et / ou localStorage.

2. titre & # 8212; Firefox ignore actuellement ce paramètre, bien qu'il puisse l'utiliser ultérieurement. Passer la chaîne vide ici devrait être sûr contre les modifications futures de la méthode. Vous pouvez également passer un court titre pour l’état dans lequel vous vous déplacez.

3. URL & # 8212; 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 à <=>, mais il pourrait tenter de charger l'URL ultérieurement, par exemple après le redémarrage du navigateur par l'utilisateur. La nouvelle URL n'a pas besoin d'être absolue. s'il est relatif, il est résolu par rapport à l'URL actuelle. La nouvelle URL doit avoir la même origine que l'URL actuelle. sinon, <=> lève une exception. Ce paramètre est facultatif. s'il n'est pas spécifié, il est défini sur l'URL actuelle du document.

Answer 7

Il existe un composant Yahoo YUI (gestionnaire d’historique du navigateur) qui peut gérer cela: http: // developer.yahoo.com/yui/history/

Answer 8

La galerie de photos de Facebook utilise 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.

Answer 9

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

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

Answer 10

Ce qui fonctionne pour moi, c’est - history.replaceState() la fonction qui se présente comme suit -

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

Cela ne rechargera pas la page, vous pouvez vous en servir avec l'événement de javascript

Answer 11

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

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

Ou permettre simplement à la personne de changer le paramètre get, alors location.get = me=1&page=1.

La page d'origine devient http://domain.com/site/page.html?me=1&page=1 et ne s'actualise pas.

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

D'après ce que j'ai vu, l'historique de Yahoo charge déjà toutes les données en même temps. Il ne semble pas faire de demandes Ajax. Ainsi, quand un div est utilisé pour traiter différentes heures supplémentaires de méthode, ces données ne sont pas stockées pour chaque état de l'historique.

Answer 12

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:)

Answer 13

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 Load, vous pouvez utiliser le même location.hash pour rechercher la valeur pertinente. Rappelez-vous simplement de supprimer # de la valeur renvoyée par <=> par exemple

.

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

Answer 14

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

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

Ceci ajoutera /abc après le nom de domaine dans l'URL du navigateur. Il vous suffit de copier ce code et de le coller dans la console du navigateur pour afficher l'URL qui devient & Quot; https://stackoverflow.com/abc "