web-dev-qa-db-fra.com

Comment mettre à jour les URL ou les chaînes de requête à l'aide de javascript/jQuery sans recharger la page?

Est-il possible de mettre à jour l'URL par programme sans recharger la page?

EDIT: J'ai ajouté quelque chose dans le titre du post. Je veux juste préciser que je ne veux pas recharger la page

javascriptjquery
70
arvinsim

Oui - document.location = "http://my.new.url.com"

Vous pouvez également le récupérer de la même manière, par exemple. 

var myURL = document.location;
document.location = myURL + "?a=parameter";

L'objet location a également un certain nombre de propriétés utiles:

hash            Returns the anchor portion of a URL
Host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

EDIT: La définition du hachage du document.location ne devrait pas recharger la page, mais simplement changer l’emplacement de la page. Donc, la mise à jour à #myId fera défiler jusqu'à l'élément avec id="myId". Si la id n'existe pas, je crois que rien ne se passera? (Besoin de confirmer sur différents navigateurs cependant)

EDIT2: Pour que tout soit clair, pas seulement dans un commentaire: Vous ne pouvez pas mettre à jour l'URL complète avec javascript sans changer de page, il s'agit d'une restriction de sécurité. Sinon, vous pouvez cliquer sur un lien vers une page aléatoire, conçu pour ressembler à gmail, et changer instantanément l'URL en www.gmail.com et voler les informations de connexion des personnes.
Vous pouvez modifier la partie après le domaine sur certains navigateurs pour gérer les choses de style AJAX, mais cela a déjà été lié à Osiris. De plus, vous ne devriez probablement pas faire cela, même si vous le pouviez. L'URL indique à l'utilisateur où il se trouve sur votre site. Si vous le changez sans changer le contenu de la page, cela devient un peu déroutant.

39
Matt Fellows

Oui et non. Tous les navigateurs Web courants ont une mesure de sécurité pour empêcher cela. L'objectif est d'empêcher les utilisateurs de créer des répliques de sites Web, de modifier l'URL afin de lui donner une apparence correcte, puis de tromper les utilisateurs et d'obtenir leurs informations.

Cependant, certains navigateurs Web compatibles avec HTML5 ont implémenté une API d'historique qui peut être utilisée pour quelque chose de similaire à ce que vous voulez:

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

J'ai testé et cela a bien fonctionné. Il ne recharge pas la page, mais vous permet uniquement de modifier la requête d'URL. Vous ne pourrez pas modifier le protocole ni les valeurs de l'hôte.

Pour plus d'informations:

http://diveintohtml5.info/history.html

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

86
Fabio Nolasco

Vous pouvez utiliser :

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)
6
Sud

Utilisation 

window.history.replaceState ({}, document.title, updatedUri);

Pour mettre à jour l'URL sans recharger la page

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

Pour supprimer la chaîne de requête sans recharger la page

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}
4
Prasad De Silva

Oui

document.location est la voie normale.

Cependant, document.location est en réalité identique à window.location, sauf que window.location est un peu plus pris en charge par les anciens navigateurs.

Consultez ce fil sur SO pour plus d’informations:

Quelle est la différence entre window.location et document.location en JavaScript?

3
MasNotsram

Le préfixe de l'URL change avec un hashtag pour éviter une redirection.

Cela redirige

location.href += '&test='true';

Cela ne redirige pas

location.href += '#&test='true';
1
Timothy Gonzalez

Plain javascript: document.location = 'http://www.google.com';

Cela entraînera cependant une actualisation du navigateur - envisagez d'utiliser des hachages si vous avez besoin de mettre à jour l'URL pour implémenter une sorte d'histoire de navigation sans recharger la page. Vous voudrez peut-être examiner jQuery.hashchange si tel est le cas.

0
Claus

Vous aurez besoin d'être plus précis. Qu'entendez-vous par 'mettre à jour l'URL'? Cela pourrait signifier de naviguer automatiquement vers une page différente, ce qui est certainement possible.

Si vous souhaitez simplement mettre à jour le contenu de la barre d’adresse sans recharger la page, voir Modifier l’URL sans recharger la page

0
Osiris

Définissez un nouvel objet URL, attribuez-lui l'URL actuelle, ajoutez vos paramètres à cet objet URL et, enfin, envoyez-le à l'état de votre navigateur.

var url = new URL(window.location.href);
//var url = new URL(window.location.Origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);
0
Ron Royston