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.
javascript
url
html5-history
fragment-identifier
hashchange
Steven Noble
la source
la source
pushState
:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
Réponses:
Avec HTML 5, utilisez la
history.pushState
fonction . Par exemple:et un href:
Si vous souhaitez modifier l'URL sans ajouter une entrée à la liste des boutons de retour, utilisez
history.replaceState
plutôt.la source
Si vous voulez qu'il fonctionne dans les navigateurs qui ne le prennent pas en charge,
history.pushState
ethistory.popState
pourtant, 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.hash
proprié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 chargeonhashchange
(IE <8, Firefox <3.6), vérifiez périodiquement voir si le hachage a changé (en utilisantsetInterval
par 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.
la source
setInterval
pour inspecter l'document.location.hash
un, vous pouvez utiliser l'hashchange
événement, car il est beaucoup plus adopté. Vérifiez ici quels navigateurs prennent en charge chaque norme . Mon approche actuelle consiste à utiliser push / popState sur les navigateurs qui le prennent en charge. Sur les autres, j'ai défini le hachage et ne regarde que leshashchange
navigateurs compatibles. Cela laisse IE <= 7 sans support d'historique, mais avec un permalien utile. Mais qui se soucie de l'histoire d'IE <= 7?_trackPageview
avec l'URL "réelle" de la nouvelle page.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.
la source
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]
la source
history.pushState()
.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.
la source
jQuery a un excellent plugin pour changer l'URL des navigateurs, appelé jQuery-pusher .
JavaScript
pushState
et jQuery peuvent être utilisés ensemble, comme:history.pushState(null, null, $(this).attr('href'));
Exemple:
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: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.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.
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.la source
Il existe un composant Yahoo YUI (Browser History Manager) qui peut gérer cela: http://developer.yahoo.com/yui/history/
la source
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»:
Après avoir cliqué sur «suivant»:
Notez le hash-bang (#!) Immédiatement suivi de la nouvelle URL.
la source
Il y a un plugin jquery http://www.asual.com/jquery/address/
Je pense que c'est ce dont vous avez besoin.
la source
Ce qui fonctionne pour moi, c'est - la
history.replaceState()
fonction qui est la suivante -Cela ne rechargera pas la page, vous pouvez l'utiliser avec un événement javascript
la source
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 fairelocation.append = new.html
et la page devient:http://domain.com/site/page.htmlnew.html
et 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=1
et 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
div
est 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.la source
mon code est:
et action:
et exemple
C'est tout :)
la source
Une réponse plus simple que je présente,
cela s'ajoutera
/abc
aprè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 "la source
J'ai eu du succès avec:
Il ajoute simplement
#myValue
à l'URL actuelle. Si vous devez déclencher un événement sur la page Charger, vous pouvez l'utiliserlocation.hash
pour vérifier la valeur appropriée. N'oubliez pas de supprimer le#
de la valeur retournée parlocation.hash
exemplela source