Modifier une chaîne de requête sans recharger la page

Question

Je suis en train de créer une galerie de photos et j'aimerais pouvoir modifier la chaîne de requête et le titre lorsque les photos sont parcourues.

Le comportement que je recherche est souvent observé dans certaines implémentations de la page continue/infinie, où lorsque vous défilez vers le bas, la chaîne de requête continue d'incrémenter le numéro de page ( http://x.com?page=4 ), etc. Cela devrait être simple en théorie, mais je voudrais quelque chose qui soit sûr pour les principaux navigateurs.

J'ai trouvé cet excellent article et essayait de suivre l'exemple avec window.history.pushstate mais cela ne semble pas fonctionner pour moi. Et je ne suis pas sûr que ce soit l'idéal car je ne me soucie pas vraiment de modifier l'historique du navigateur.

Je souhaite simplement pouvoir offrir la possibilité de mettre en signet la photo actuellement visualisée, sans avoir à recharger la page à chaque fois que la photo est modifiée.

Voici un exemple de page infinie qui modifie la chaîne de requête : http://tumbledry.org/

MISE À JOUR a trouvé cette méthode :

window.location.href = window.location.href + '#abc';

Answer 1

Si vous cherchez à modifier Hash, votre solution fonctionne bien. Cependant, si vous voulez changer la requête, vous pouvez utiliser le pushState, comme vous l'avez dit. Voici un exemple qui pourrait vous aider à l'implémenter correctement. J'ai testé et cela a fonctionné correctement :

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

Il ne recharge pas la page, mais vous permet uniquement de modifier la requête URL. Il n'est pas possible de modifier le protocole ou les valeurs de l'hôte. Et bien sûr, elle nécessite des navigateurs modernes qui peuvent traiter l'API HTML5 History.

Pour plus d'informations :

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Vieille question, réponse moderne pour aider les futurs développeurs ; l'utilisation de la fonction URL l'interface :

const url = new URL(window.location);
url.searchParams.set('key', value);
window.history.pushState(null, '', url.toString());

Cela permet de s'assurer que vous ne modifiez que le paramètre de requête souhaité.

Answer 3

Je souhaite améliorer la réponse de Fabio et créer une fonction qui ajoute une clé personnalisée à la chaîne d'URL sans recharger la page.

 function insertUrlParam(key, value) {
        if (history.pushState) {
            let searchParams = new URLSearchParams(window.location.search);
            searchParams.set(key, value);
            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
            window.history.pushState({path: newurl}, '', newurl);
        }
    }

// to remove the specific key
export function removeUrlParameter(paramKey) {
  const url = window.location.href
  console.log("url", url)
  var r = new URL(url)
  r.searchParams.delete(paramKey)
  const newUrl = r.href
  console.log("r.href", newUrl)
  window.history.pushState({ path: newUrl }, '', newUrl)
}

Answer 4

Si nous voulons simplement mettre à jour le paramètre de la requête sans toucher aux autres parties de l'URL, il n'est pas nécessaire de recréer l'URL. C'est ce que j'utilise :

const addQueryParam = (key, value) => {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.pushState({}, '', url.toString());
};

const getQueryParam = (key) => {
  const url = new URL(window.location.href);
  return url.searchParams.get(key) || '';
};

Answer 5

J'ai utilisé la bibliothèque JavaScript suivante avec beaucoup de succès :

https://github.com/balupton/jquery-history

Il prend en charge l'API d'historique HTML5 ainsi qu'une méthode de repli (utilisant #) pour les navigateurs plus anciens.

Cette bibliothèque est essentiellement un polyfill autour de `history.pushState'.