web-dev-qa-db-fra.com

Comment actualiser une page avec jQuery?

Comment actualiser une page avec jQuery?

javascriptjqueryrefreshreload
2185
luca

Utilisez location.reload() :

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

La fonction reload() accepte un paramètre facultatif pouvant être défini sur true pour forcer un rechargement à partir du serveur plutôt que du cache. Le paramètre par défaut est false. Par conséquent, la page peut être rechargée par défaut à partir du cache du navigateur.

3519
Roy

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

location.reload();
429
Thorben

Il y a plusieurs façons illimitées d'actualiser une page avec 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 devions extraire à nouveau le document du serveur Web (par exemple, le contenu du document change de manière dynamique), nous passerions l'argument sous la forme true.

Vous pouvez continuer la liste en cours de création:

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>
424
Ionică Bizău

Je suppose que beaucoup de moyens fonctionneront,

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
193
David

Pour recharger une page avec jQuery, faites:

$.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. Ensuite, j'ai mis le code dans le gestionnaire qui déclenchera le rechargement. Le URL est "", ce qui signifie cette page.

117
Peter

Si la page en cours a été chargée par une requête POST, vous souhaiterez peut-être utiliser

window.location = window.location.pathname;

au lieu de

window.location.reload();

car window.location.reload() demandera une confirmation s’il est appelé sur une page chargée par une demande POST.

100
SumairIrshad

La question devrait être,

Comment actualiser 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 avez l'embarras du choix.

59
JohnP

Vous voudrez peut-être utiliser

location.reload(forceGet)

forceGet est un booléen et facultatif.

La valeur par défaut est false, ce qui recharge la page à partir du cache.

Définissez ce paramètre sur true si vous souhaitez forcer le navigateur à extraire la page du serveur afin de supprimer également le cache.

Ou juste

location.reload()

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

51
Pinch

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

Donc, si vous souhaitez simplement actualiser le code HTML, le window.location = document.URL vous sera renvoyé beaucoup plus rapidement et avec moins de trafic. Mais il ne rechargera pas la page s'il y a un dièse (#) dans l'URL.

23
user762330

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

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
15
Suleman Mirza

Voici une solution qui recharge de manière asynchrone une page à l'aide de jQuery. Cela évite le scintillement causé par window.location = window.location. Cet exemple montre une page qui recharge continuellement, comme dans un tableau de bord. Il a fait l'objet de tests de combat et fonctionne sur un téléviseur à écran d'information situé à 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>

Remarques:

  • Utiliser $.ajax directement comme $.get('',function(data){$(document.body).html(data)})provoque que les fichiers css/js soient contournés en cache , même si vous utilisez cache: true, c'est pourquoi nous utilisons parseHTML
  • parseHTML NE TROUVERA PAS DE BALISE body si tout votre corps a besoin d'une division supplémentaire, j'espère que cette pépite de connaissances vous aidera un jour, vous pouvez deviner comment nous avons choisi l'identifiant pour cette div
  • Utilisez http-equiv="refresh" juste au cas où quelque chose ne va pas avec javascript/hoquet de serveur, alors la page rechargera encore sans que vous receviez un appel téléphonique
  • Cette approche manque probablement de mémoire, l’actualisation http-equiv corrige ce problème.
13
William Entriken

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

Simple solution JavaScript simple:

Le moyen le plus simple est une solution à une ligne placée de manière appropriée:

location.reload();

Ce qui manque à beaucoup de gens ici, car ils espèrent obtenir quelques "points", c’est que la fonction reload () offre elle-même un booléen en tant que paramètre (détails: https://developer.mozilla.org/en-US/docs/Web/API/Emplacement/reload ).

La méthode Location.reload () recharge la ressource à partir du fichier .__ actuel. URL Son paramètre unique facultatif est un booléen, qui, lorsqu'il est true, la page est toujours rechargée à partir du serveur. Si c'est false ou non spécifié, le navigateur peut recharger la page à partir de son cache.

Cela signifie qu'il y a deux manières:

Solution1: Forcer le rechargement de la page en cours à partir du serveur

location.reload(true);

Solution2: Rechargement depuis le cache ou le serveur (en fonction du navigateur et de votre configuration)

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

Et si vous souhaitez combiner cela avec jQuery lors de l'écoute d'un événement, je vous recommande d'utiliser la méthode ".on ()" au lieu de ".click" ou d'autres wrappers d'événements, par exemple. une solution plus appropriée serait:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
12
Fer To

J'ai trouvé

window.location.href = "";

ou

window.location.href = null;

effectue également un rafraîchissement de la page.

Cela facilite beaucoup le rechargement de la page en supprimant tout hachage . C'est très agréable lorsque j'utilise AngularJS dans le simulateur iOS, de sorte que je n'ai pas à réexécuter l'application.

11
Mujah Maskey

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

Avec le paramètre true

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

Avec le paramètre default/false

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

En utilisant jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
5
Poorna Senani Gamage

Vous n'avez pas besoin de rien de jQuery, pour recharger une page à l'aide de JavaScript pur , utilisez simplement la fonction reload sur la propriété location comme ceci:

window.location.reload();

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

Si vous souhaitez forcer le rechargement de la page, il suffit de passer une valeur true à la méthode de rechargement 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
Alireza

Toutes les réponses ici sont bonnes. Comme la question précise à propos du rechargement de la page avec jquery, je pensais simplement ajouter quelque chose de plus aux futurs lecteurs.

jQuery est une bibliothèque JavaScript multi-plateforme conçue pour simplifier les scripts HTML du côté client.

~ Wikipedia ~

Vous comprendrez donc que la base de jquery ou jquery est basée sur javascript . Donc, aller avec pure javascript est bien meilleur quand il s’agit de choses simples.

Mais si vous avez besoin de jquery solution, en voici une.

$(location).attr('href', '');
2
Roshana Pitigala

Si vous utilisez jQuery et souhaitez actualiser, essayez d’ajouter votre jQuery à une fonction javascript:

Je voulais cacher un iframe d'une page lorsque je cliquais sur un h3; cela fonctionnait pour moi, mais je ne pouvais pas cliquer sur l'élément qui me permettait d'afficher la iframe à moins que je ne rafraîchisse le navigateur manuellement ... pas l'idéal .

J'ai essayé ce qui suit:

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

Le mélange de javascript simple Jane 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
J. Moreno

Solution Javascript simple: 

 location = location; 


<button onClick="location = location;">Reload</button>

1
hev1

Utilisez onclick="return location.reload();" dans la balise button.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
1
Frank

utilisation 

location.reload();

ou

window.location.reload();
1
H.Ostwal

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

Il utilise l'encapsuleur jQuery et extrait l'élément dom natif. 

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

Il suffit de choisir entre 1 et 10 selon vos besoins ou d’en ajouter d’autres en fonction du modèle et des réponses à apporter.

<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>
0
David Angulo

C'est le plus court en JavaScript.

location = '';
0
Na Nonthasen

Cela fonctionne pour moi:

document.location.reload();
0
GameMaster