web-dev-qa-db-fra.com

window.history.pushState actualise le navigateur

Je travaille sur du code javascript et j'utilise window.History.pushState pour charger les nouvelles HTML pages au lieu d'utiliser les balises href. Mon code (qui fonctionne fonctionne bien ) ressemble à ceci.

window.History.pushState({urlPath:'/page1'},"",'/page1')

étrangement, cela échoue , c.-à-d. recharge le navigateur

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

Mais cela fonctionne , le contenu est mis à jour, le navigateur n'est pas actualisé! (notez que l'URL est absolue et non relative)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

Le documentation pour window.History.pushState dit que le troisième paramètre URL peut être absolu ou relatif -

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 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 être de même origine que l'URL actuelle. sinon, pushState () 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.

Les URL absolues semblent fonctionner mais les relatives ne le sont pas. Pourquoi cela arrive-t-il?

32
Ankit Rustagi

La réponse courte est que history.pushState (Pas History.pushState, Ce qui jetterait une exception, la partie window est facultative) ne fera jamais ce que vous suggérez.

Si les pages sont actualisées, cela est dû à d'autres actions que vous effectuez (par exemple, le code en cours d'exécution peut être redirigé vers un nouvel emplacement en cas de changement de la barre d'adresse).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') fonctionne exactement comme dans les dernières versions de Chrome, IE et Firefox pour moi et mes collègues).

En fait, vous pouvez mettre ce que vous voulez dans la fonction: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

Si vous postez un peu plus de code (avec une attention particulière pour le code à proximité de history.pushState Et partout où document.location Est utilisé), nous nous ferons un plaisir de vous aider à déterminer exactement où se trouve ce problème. provenir de.

Si vous postez plus de code, je mettrai à jour cette réponse (j'ai votre question préférée) :).

38
Maverick

Comme d'autres l'ont suggéré, vous n'expliquez pas clairement votre problème, ce que vous essayez de faire ou ce que vous attendez de ce que cette fonction est réellement censée faire.

Si j'ai bien compris, vous vous attendez à ce que cette fonction actualise la page pour vous (vous utilisez en réalité le terme "recharge le navigateur").

Mais cette fonction n'est pas destinée à recharger le navigateur.

Toute la fonction consiste à ajouter (Push) un nouvel "état" à l'historique du navigateur, afin que l'utilisateur puisse à l'avenir revenir à cet état dans lequel se trouve actuellement la page Web.

Normalement, ceci est utilisé conjointement avec les appels AJAX (qui actualisent uniquement une partie de la page).

Par exemple, si un utilisateur effectue une recherche "CATS" dans l’un de vos champs de recherche et que les résultats de la recherche (probablement de jolies images de chats) sont chargés via AJAX, dans le coin inférieur droit de votre page. l'état de la page ne sera pas changé. En d'autres termes, dans un avenir proche, lorsque l'utilisateur décide de revenir à sa recherche de "CATS", il ne le pourra pas, car l'état n'existe pas dans son historique. Il ne pourra que revenir en arrière dans votre champ de recherche vide.

D'où la nécessité de la fonction

history.pushState({},"Results for `Cats`",'url.html?s=cats');

Il s'agit d'un moyen de permettre au programmeur de définir spécifiquement sa recherche dans l'historique de l'utilisateur. C'est tout ce que c'est destiné à faire.

Lorsque la fonction fonctionne correctement, la seule chose que vous devriez vous attendre à voir, c'est l'adresse dans la barre d'adresse de votre navigateur qui change pour tout ce que vous spécifiez dans votre URL.

Si vous comprenez déjà cela, alors désolé pour ce long préambule. Mais la façon dont vous posez la question semble indiquer que vous ne l’avez pas fait.

En passant, j'ai également constaté certaines contradictions entre la manière dont la fonction est décrite dans la documentation et la manière dont elle fonctionne dans la réalité. Je trouve que ce n'est pas une bonne idée d'utiliser des valeurs vides ou vides comme paramètres.

Voir ma réponse à this SO question . Je recommanderais donc de placer une description dans votre deuxième paramètre. De mémoire, il s'agit de la description que l'utilisateur voit dans la liste déroulante. -down, quand il clique et maintient sa souris sur le bouton "retour".

5
cartbeforehorse
window.history.pushState({urlPath:'/page1'},"",'/page1')

Ne fonctionne que lorsque la page est chargée, et lorsque vous cliquez sur Actualiser, cela ne signifie pas qu’il existe une URL réelle.

Ce que vous devez faire ici est de savoir vers quelle URL vous êtes redirigé lorsque vous rechargez cette page. Et sur cette page, vous pouvez obtenir les conditions en récupérant l'URL actuelle et en créant toutes vos conditions.

2
TBI