Comment recharger une page en utilisant JavaScript

877

Comment puis-je recharger la page en utilisant JavaScript?

J'ai besoin d'une méthode qui fonctionne dans tous les navigateurs.

Resh
la source

Réponses:

948

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.
gianebao
la source
82
'true' forcera la page à se recharger depuis le serveur. 'false' se rechargera à partir du cache, si disponible.
barro32
3
.reload(true)S'ajoute- t- il à l'histoire? Si oui, comment éviter cela avec le rechargement?
johntrepreneur
13
Voici un lien vers les documents: developer.mozilla.org/en-US/docs/Web/API/window.location
Justin Ethier
1
C'EST la meilleure réponse et devrait être au top. Mon problème avec les autres fonctions est qu'elles n'actualisaient pas la page avec le contenu du serveur et n'utilisaient pas le cache à la place, donc la solution JavaScript 1.2 était la meilleure et la seule solution pour moi.
Ryan Coolwebs
8
.reload (true) ou .reload (false) est déconseillé selon mon IDE et github.com/Microsoft/TypeScript/issues/28898 - devrait maintenant utiliser .reload ()
danday74
392
location.reload();

Voir cette page MDN pour plus d'informations.

Si vous rafraîchissez après un, onclickvous devrez retourner false directement après

location.reload();
return false;
Lekensteyn
la source
23
Quelle est la difference entre location.reload()et window.location.reload()?
Raptor
54
Habituellement @ShivanRaptor aucun, dans les navigateurs web contexte, locationest le même que celui window.locationque windowest l'objet global.
Lekensteyn
1
n'oubliez pas de l' return false;appeler à partir d'un onclick dans un lien.
Rimian
2
Je préfère utiliser window.location.reload();pour la lisibilité, comme locationpourrait être une variable locale - alors que vous évitez généralement les variables du nom window.
Yeti
219

Voici 535 façons de recharger la page en utilisant JavaScript , la plus simple étant location = location.

Ce sont les 50 premiers:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...
Jeremy Thille
la source
84
c'est intéressant, mais maintenant je suis confus
Arun Prasad ES
14
Il met également en évidence la particularité de Javascript :)
Jeremy Thille
53
Personnellement, je n'aime pas cette réponse car cela montre juste une poignée d'implémentations différentes pour changer l'emplacement. Ces façons sont des permutations de différentes façons d'exécuter une fonction ou d'accéder à un attribut en javascript. PAS différentes façons de recharger une page.
Joshua Behrens
42
Bien sûr, il y en a encore plus, comme:window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Renato
85

Vous pouvez effectuer cette tâche à l'aide de window.location.reload();. Comme il existe de nombreuses façons de le faire, mais je pense que c'est la façon appropriée de recharger le même document avec JavaScript. Voici l'explication

L' window.locationobjet JavaScript peut être utilisé

  • pour obtenir l'adresse de la page actuelle (URL)
  • rediriger le navigateur vers une autre page
  • recharger la même page

window: en JavaScript représente une fenêtre ouverte dans un navigateur.

location: en JavaScript contient des informations sur l'URL actuelle.

L' locationobjet est comme un fragment de l' windowobjet et est appelé via la window.locationpropriété.

location l'objet a trois méthodes:

  1. assign(): utilisé pour charger un nouveau document
  2. reload(): utilisé pour recharger le document actuel
  3. replace(): utilisé pour remplacer le document actuel par un nouveau

Ici, nous devons utiliser reload(), car cela peut nous aider à recharger le même document.

Alors utilisez-le comme window.location.reload();.

Démo en ligne sur jsfiddle

Pour demander à votre navigateur de récupérer la page directement depuis le serveur et non depuis le cache, vous pouvez passer un trueparamètre à location.reload(). Cette méthode est compatible avec tous les principaux navigateurs, notamment IE, Chrome, Firefox, Safari, Opera.

Nikhil Agrawal
la source
2
Ah ha! replace()s'est avéré être la solution que je cherchais car j'avais besoin de recharger ma page avec un léger changement dans la chaîne de requête.
Bernard Hymmen
De w3schools: "La différence entre assign () et replace (), c'est que replace () supprime l'URL du document actuel de l'historique du document, ce qui signifie qu'il n'est pas possible d'utiliser le bouton" retour "pour revenir à la document original."
pasaba por aqui
54

Essayer:

window.location.reload(true);

Le paramètre défini sur «true» recharge une nouvelle copie à partir du serveur. L'abandonner servira la page du cache.

Plus d'informations peuvent être trouvées sur MSDN et dans la documentation de Mozilla .

Orane
la source
1
que faire si je souhaite actualiser une page Web externe www.xyz.com/abc?
DoIt
@Dev: Vous devriez essayer avec "replace" comme mentionné plus tard
Jean Paul AKA el_vete
@Orane: J'aime à la fois la simplicité et l'ingéniosité de cette réponse, en particulier pour donner de nombreuses options juste pour répondre à la demande de l'op, cela dit, merci de fournir un lien référencé par l'autorité dans cette situation également, pour référence future comme chaque navigateur ont leur propre moteur JS pour le rendu ... Je pense que la question est très générale et que cela devrait dépendre de ce que vous voulez faire, car sinon référence web: " phpied.com/files/location-location/location- location.html "pourrait satisfaire complètement l'opération pour cette question. Cependant, celui-ci m'a aidé;)
Jean Paul AKA el_vete
1
Est-ce toujours vrai? Ces deux liens ne mentionnent aucun paramètre de rechargement.
Rüdiger Schulz
51

Je cherchais des informations concernant les rechargements sur les pages récupérées avec des requêtes POST, comme après avoir soumis un method="post"formulaire.

Pour recharger la page en conservant les données POST, utilisez:

window.location.reload();

Pour recharger la page en supprimant les données POST (effectuer une requête GET), utilisez:

window.location.href = window.location.href;

J'espère que cela peut aider les autres à rechercher les mêmes informations.

Starwarswii
la source
Merci pour la réponse incluant une référence au rechargement d'un document récupéré avec une POSTdemande.
Christopher Schultz
Bonne distinction entre GETet POSTméthodes
Hassan Baig
Cette réponse était trop loin!
Greg Randall du
1
window.location.href = window.location.hrefne recharge pas la page si l'url actuelle contient un #. Vous pouvez supprimer le hachage si vous n'en avez pas besoin window.location.href = window.location.href.split('#')[0];.
Roland Starke
41

Pour recharger une page en utilisant JavaScript, utilisez:

window.location.reload();
Girish Ninama
la source
37

Cela fonctionne pour moi:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/

umer
la source
Pour moi, cela est préférable, car cela évite une condition de boucle côté serveur
ILMostro_7
1
J'apprécie particulièrement l'inclusion de la fonction de délai d'attente, car j'ai un message que je veux toujours voir avant le rafraîchissement. Gloire!
Matt Cremeens
vous pouvez définir différentes valeurs comme deuxième argument de la fonction setTimeout mais cela ne fonctionnera pas, le rechargement se fera immédiatement, comment le résoudre?
O.Kuz
1
@ O.Kuz ne le pense pas. disons que si vous définissez la valeur sur 5000 ms, le rechargement aura lieu après 5 secondes. voir jsfiddle.net/umerqureshi/znruyzop/446
umer
1
Je dois trouver une erreur dans mon code) Merci beaucoup!
O.Kuz
15

Si vous mettez

window.location.reload(true);

au début de votre page, sans aucune autre condition qualifiant la raison pour laquelle ce code s'exécute, la page se charge, puis continue de se recharger jusqu'à ce que vous fermiez votre navigateur.

Joe Devlin
la source
Eh bien, ou jusqu'à ce que vous ouvriez une autre URL. Cela dépend probablement de la capacité du navigateur à gérer les (re) chargements de page continus.
adamdunson
eh bien cela dépend de l'endroit où vous le placez comme vous l'avez correctement dit. Nous nous référons ici simplement que peut-être une balise d'ancrage n'est pas l'élément intuitif pour exécuter une action telle que le rechargement de la page. Suggestion: nous comptons sur un autre objet d'interface utilisateur comme cible pour faire un événement onclick. Vous pouvez le faire dans jQuery après le chargement de la page en ciblant un div, par exemple si vous le décorez avec css .. Cela dépend de ce que vous voulez en faire. Dans ce contexte, un bouton plutôt qu'un bouton de type d'entrée.Si nous ne prévoyons pas de passer un argument à l'application principale, cela semble plus approprié.
Jean Paul AKA el_vete
IE: <bouton onclick = "javascript: window.location.reload (true);"
Jean Paul AKA el_vete
11
location.href = location.href;
guilin 桂林
la source
5
Les navigateurs modernes ignorent cela car le href ne change pas, il n'est donc pas nécessaire de le recharger. Vous ne devez l'utiliser que comme basculement pour les anciens navigateurs sans rechargement: (location.reload? Location.reload (): location.href = location.href)
Radek Pech
@RadekPech Quels anciens navigateurs ne possèdent pas location.reload()?
Matthias
8

Pour le rendre facile et simple, utilisez location.reload(). Vous pouvez également l'utiliser location.reload(true)si vous souhaitez récupérer quelque chose sur le serveur.

Joshua
la source
8

Utiliser un bouton ou simplement le mettre dans une balise "a" (ancre):

<input type="button" value="RELOAD" onclick="location.reload();" />

Essayez-les pour d'autres besoins:

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one
Arun Prasad ES
la source
1
intéressant ... que diriez-vous de <button> </button>? fonctionne de la même façon, non?
Jean Paul AKA el_vete
1
Cela a fonctionné comme un charme! Voir ma réponse ci-dessous :) Merci
Jean Paul AKA el_vete
5

Le plus court ( plus )

history.go()
Kamil Kiełczewski
la source
4

Rechargement automatique de la page après 20 secondes.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>
Ali Chegini
la source
4

Merci, ce message a été très utile, non seulement pour recharger la page avec la réponse suggérée, mais aussi pour me donner l'idée de placer une icône d'interface utilisateur jQuery sur un bouton:

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

Modifié pour montrer à quoi cela ressemble lorsqu'il est inclus dans un projet

2016-07-02

Mes excuses car c'est un projet personnel qui implique d'utiliser jQuery UI, Themeroller, le framework Icons, des méthodes comme les onglets jQuery, mais c'est en espagnol;)

Jean Paul AKA el_vete
la source
@Peter Mortensen: Merci pour la modification, ce prototype de projet a été fait pour le collège, donc il devait être en espagnol aux captures d'écran jointes .. mes excuses pour cela .. Bien sûr, il y avait la nécessité d'avoir un noyau lié à jQuery UI dépendances pour le faire se mélanger comme: --- par exemple le widget ThemeRoller jqueryui.com/themeroller , et des plugins tels que: plugins.jquery.com/qTip2 , datatables.net .. la bibliothèque jQuery elle-même, etc. mais le l'action a été effectuée sur la base de certaines des réponses ci-dessus: onclick = "javascript: window.location.reload (true);">!
Jean Paul AKA el_vete
3

Cela devrait fonctionner:

window.location.href = window.location.href.split( '#' )[0];

ou

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

Je préfère cela pour les raisons suivantes:

  • Supprime la partie après le #, garantissant que la page se recharge sur les navigateurs qui ne rechargeront pas le contenu qui en contient.
  • Il ne vous demande pas si vous souhaitez republier le dernier contenu si vous avez récemment soumis un formulaire.
  • Cela devrait fonctionner même sur les navigateurs les plus récents. Testé sur Lasted Firefox et Chrome.

Alternativement, vous pouvez utiliser la méthode officielle la plus récente pour cette tâche

window.location.reload()
Ayoola Falola
la source
3

Utilisez ce bouton pour rafraîchir la page

DEMO

<input type="button" value="Reload Page" onClick="document.location.reload(true)">
Meysam
la source
2

La méthode reload () est utilisée pour recharger le document actuel.

La méthode reload () fait la même chose que le bouton de rechargement de votre navigateur.

Par défaut, la méthode reload () recharge la page à partir du cache, mais vous pouvez la forcer à recharger la page à partir du serveur en définissant le paramètre forceGet sur true: location.reload (true).

        location.reload();
GeniusGeek
la source
-3

Vous pouvez simplement utiliser

window.location=document.URL

où document.URL obtient l'URL de la page actuelle et window.location la recharge.

Sanu Uthaiah Bollera
la source
2
Les navigateurs modernes ignorent cela car le href ne change pas, il n'est donc pas nécessaire de le recharger. Vous ne devez l'utiliser que comme basculement pour les anciens navigateurs sans rechargement: (location.reload? Location.reload (): location = document.URL)
Radek Pech