Comment rafraîchir une page avec jQuery?

Comment rafraîchir une page avec jQuery?

2107
demandé sur Elijah Manor 2011-03-23 14:55:31

21 réponses

Utilisation location.reload() : 

$('#something').click(function() {
    location.reload();
});

la fonction reload() prend un paramètre optionnel qui peut être défini à true pour forcer une recharge à partir du serveur plutôt que du cache. Le paramètre par défaut est false , donc par défaut la page peut se recharger à partir du cache du navigateur.

3395
répondu Roy 2015-10-19 20:20:35

cela devrait fonctionner sur tous les navigateurs, même sans jQuery: 

location.reload();
417
répondu Thorben 2017-01-14 16:11:34

Il y a multiple illimité pour actualiser une page avec du JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)

  6. location.reload(false)

    si nous avions besoin de tirer le document de le serveur web encore une fois (comme lorsque le contenu du document changement dynamique) nous pourrions passer l'argument comme true .

Vous pouvez continuer la liste à être créatif:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ...et autres 534 voies 

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
355
répondu Ionică Bizău 2015-10-01 14:50:41

beaucoup de façons fonctionneront, je suppose:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
186
répondu David 2012-08-29 08:46:43

pour recharger une page avec jQuery, faire: 

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

L'approche que j'ai utilisée ici était Ajax jQuery. Je l'ai testé sur Chrome 13. Puis j'ai mis le code dans le gestionnaire qui va déclencher le recharger. Le URL est "" , qui signifie cette page .

116
répondu Peter 2015-09-14 13:11:40

si la page courante a été chargée par une requête POST, vous pouvez utiliser 

window.location = window.location.pathname;

au lieu de 

window.location.reload();

parce que window.location.reload() demandera une confirmation s'il est appelé sur une page qui a été chargée par une requête POST.

99
répondu SumairIrshad 2015-10-19 21:36:09

la question devrait être,

comment rafraîchir une page avec JavaScript 

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

vous êtes gâté pour le choix.

58
répondu JohnP 2013-08-10 08:43:32

vous pouvez vouloir utiliser 

location.reload(forceGet)

forceGet est un booléen optionnel.

la valeur par défaut est false qui recharge la page depuis le cache.

définissez ce paramètre à true si vous voulez forcer le navigateur à récupérer la page du serveur pour se débarrasser du cache.

ou juste 

location.reload()

si vous voulez rapide et facile avec la mise en cache.

50
répondu Pinch 2017-01-14 16:15:41

Trois approches différentes cache comportements liés à:

donc, en résumé, vous voulez utiliser:

  • location = location pour une utilisation maximale du cache, aussi longtemps que la page n'a pas de hachage dans son URL, auquel cas cela ne fonctionnera pas""
  • location.reload(true) à récupérez de nouvelles copies de toutes les ressources sans les revalider (bien que ce ne soit pas universellement supporté et ne se comportera pas différemment de location.reload() dans certains navigateurs, comme Chrome)
  • location.reload() pour reproduire fidèlement l'effet de l'utilisateur en cliquant sur le bouton "actualiser".
31
répondu Mark Amery 2015-11-19 10:53:37

window.location.reload() rechargera à partir du serveur et chargera toutes vos données, scripts, images, etc. encore.

donc si vous voulez juste rafraîchir le HTML, le window.location = document.URL reviendra beaucoup plus vite et avec moins de trafic. Mais il ne rechargera pas la page s'il y a un hachage (#) dans L'URL.

22
répondu Peter Mortensen 2017-01-14 16:14:31

la fonction jQuery Load peut également effectuer un rafraîchissement de page: 

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
15
répondu Suleman Mirza 2013-08-10 08:50:52

Voici une solution qui recharge de façon asynchrone une page en utilisant jQuery. Il évite le clignotement causé par window.location = window.location . Cet exemple montre une page qui se recharge en continu, comme dans un tableau de bord. Il est testé au combat et fonctionne sur un écran d'information dans Times Square. 

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Notes:

  • en utilisant $.ajax directement comme $.get('',function(data){$(document.body).html(data)}) provoque des fichiers css/js pour obtenir cache-busted , même si vous utilisez cache: true , c'est pourquoi nous utilisons parseHTML
  • parseHTML ne trouverez PAS un body tag de sorte que votre corps tout entier a besoin d'aller en dehors de la div, j'espère que cette pépite de la connaissance vous aide un jour, vous pouvez imaginer comment nous avons choisi l'id de ce div
  • utiliser http-equiv="refresh" juste au cas où quelque chose tourne mal avec javascript/serveur hoquet, alors la page sera toujours recharger sans que vous receviez un appel téléphonique
  • cette approche fuit probablement la mémoire d'une façon ou d'une autre, le http-equiv refresh corrige que
13
répondu William Entriken 2016-05-17 22:30:47

comme la question est générique, essayons de résumer les solutions possibles pour la réponse:

de Simples JavaScript Solution :

la solution la plus facile est une solution à une ligne placée de manière appropriée: 

location.reload();

ce que beaucoup de gens manquent ici, parce qu'ils espèrent obtenir quelques "points" est que la fonction reload () elle-même offre un booléen comme paramètre (détails: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ).

L'Emplacement.la méthode de rechargement() recharge la ressource à partir du courant URL. Facultatif unique paramètre est un Booléen, qui, lorsqu'il est true, fait que la page est toujours rechargée à partir du serveur. Si c'est faux ou pas spécifié, le navigateur peut recharger la page à partir de son cache.

cela signifie qu'il y a deux façons:

Solution1: Force de rechargement de la page courante à partir du serveur 

location.reload(true);

Solution2: rechargement à partir du cache ou du serveur (basé sur le navigateur et votre configuration) 

location.reload(false);
location.reload();

et si vous voulez le combiner avec jQuery une écoute d'un événement, je recommande d'utiliser le".sur la (les) méthode" au lieu de ".cliquez sur" ou tout autre événement wrappers, par exemple, plus de solution correcte serait: 

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
12
répondu Fer To 2015-10-02 09:31:37

j'ai trouvé 

window.location.href = "";

ou 

window.location.href = null;

fait aussi un rafraîchissement de page.

cela rend beaucoup plus facile de recharger la page en supprimant tout hachage. C'est très agréable quand J'utilise AngularJS dans le simulateur iOS, de sorte que je n'ai pas à réinitialiser l'application.

11
répondu Mujah Maskey 2017-01-14 16:13:08

vous pouvez utiliser la méthode JavaScript location.reload() . Cette méthode accepte un paramètre booléen. true ou false . Si le paramètre est true , la page est toujours rechargée à partir du serveur. Si c'est false , qui est la valeur par défaut ou avec un paramètre vide, le navigateur rechargera la page depuis son cache.

avec true paramètre 

<button type="button" onclick="location.reload(true);">Reload page</button>

avec default / false paramètre 

 <button type="button" onclick="location.reload();">Reload page</button>

à l'Aide de jquery 

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
5
répondu Poorna Senani Gamage 2018-03-06 10:58:22

Vous n'ont pas besoin de quoi que ce soit à partir de jQuery, pour recharger une page à l'aide de JavaScript , il suffit d'utiliser recharger fonction de l'emplacement de la propriété comme ceci: 

window.location.reload();

par défaut, cela va recharger la page en utilisant le cache du navigateur (s'il existe)...

si vous souhaitez faire recharger la page par la force, il vous suffit de passer la valeur true pour recharger la méthode comme ci-dessous... 

window.location.reload(true);

aussi si vous êtes déjà dans window scope , vous pouvez vous débarrasser de window et faire: 

location.reload();
5
répondu Alireza 2018-05-27 04:53:24

si vous utilisez jQuery et que vous voulez rafraîchir, alors essayez d'ajouter votre jQuery dans une fonction javascript:

j'ai voulu cacher une iframe à partir d'une page en cliquant oh un h3 , pour moi, il a fonctionné, mais je n'ai pas été en mesure de cliquer l'élément qui m'a permis de voir le iframe pour commencer à moins que je rafraîchis le navigateur manuellement...pas l'idéal.

j'ai essayé la suivante: 

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

le Mélange de la plaine Jane javascript avec votre jQuery devrait fonctionner. 

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);
2
répondu J. Moreno 2018-07-25 07:57:11

utilisez onclick="return location.reload();" dans l'étiquette de bouton. 

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
1
répondu Frank 2018-05-23 10:57:38

Simple Solution Javascript: 

 location = location; 


<button onClick="location = location;">Reload</button>
1
répondu hev1 2018-07-10 18:29:02

voici quelques lignes de code que vous pouvez utiliser pour recharger la page en utilisant jQuery .

il utilise le papier d'emballage jQuery et extrait l'élément dom natif.

utilisez ceci si vous voulez juste un jQuery feeling sur votre code et vous ne vous souciez pas de vitesse/performance du code.

il suffit de choisir de 1 à 10 qui convient à vos besoins ou ajouter un peu plus en fonction de la modèle et réponses avant cette. 

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
1
répondu David Angulo 2018-09-19 06:56:16

toutes les réponses ici sont bonnes. Puisque la question spécifie de recharger la page avec , j'ai juste pensé ajouter quelque chose de plus pour les futurs lecteurs.

jQuery est une croix-plate-forme bibliothèque JavaScript conçu pour simplifier le script côté client de HTML.

~ Wikipedia ~

donc vous comprendrez que la fondation de , ou est basée sur . Donc, aller avec pur est beaucoup mieux quand il s'agit de choses simples.

mais si vous avez besoin d'une solution , en voici une. 

$(location).attr('href', '');
1
répondu Roshana Pitigala 2018-10-02 16:03:11