Comment actualiser une page avec jQuery?


2454

Comment actualiser une page avec jQuery?


29
Étant donné que jQuery est un cadre javascript pour une manipulation DOM facile et une liaison d'événements, je vous recommande de demander javascript au lieu de jQuery.
WoIIe

19
Vous n'avez pas besoin de jQuery pour cela.
Stardust

13
Plus pertinent que jamais: needsmorejquery.com
Kartik Chugh

@Stardust Vous n'avez pas besoin de jQuery pour tout ce que vous faites avec jQuery à cause de tout ce qui est possible avec JavaScript si vous pouvez le faire jQuery.
Je suis la personne la plus stupide du

Réponses:


3828

Utilisation location.reload():

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

La reload()fonction prend un paramètre facultatif qui peut être défini truepour forcer un rechargement à partir du serveur plutôt que du cache. Par défaut false, le paramètre peut se recharger à partir du cache du navigateur.


29
Ça n'a pas marché pour moi. Cela a fonctionné cependant: window.location.href = window.location.href;
Yster

5
Ça n'a pas marché pour moi. window.location.href=window.location.href;et location.href=location.href;travaillé.
twharmon

23
window.location.reload(true);sera durement rafraîchi, sinon par défaut c'est faux
Sagar Naliyapara

@Sagar N, cela fonctionne aussi pour moi. Je vous remercie. J'ai essayé dur ces derniers jours avec une approche différente mais votre solution m'a sauvé.
Ludus H

1
@FaridAbbas location.reload();est du javascript standard. Vous n'avez pas besoin de jQuery pour cela.
Mark Baijens

457

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

location.reload();

450

Il existe 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, là où le contenu du document change dynamiquement), nous passerions l'argument comme true.

Vous pouvez continuer la liste étant créative:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... et 534 autres façons

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>


10
+1 pour la liste et jsfiddle. J'ai une question, dans jsfiddle 1 et 6, faites disparaître la page générée pendant un moment pendant qu'elle est rechargée, et 2-5 faites en sorte que le rechargement de page soit "imperceptible". Dans l'outil de développement en chrome, je peux voir la page en cours de régénération, mais pourriez-vous expliquer que le processus de redessin est différent? S'il vous plaît. Merci d'avance.
Cԃ ա ԃ

@ Cԃ ա ԃ Je ne vois aucune différence ... Peut-être que le cache est le problème? Je jetterai un coup d'oeil bientôt.
Ionică Bizău

2
1 et 6 (reload()/(false))sont plus lents. hmmm. intéressant. :) et 1 et 6 sont les mêmes que reload()le paramètre par défaut de false.
Cԃ ա ԃ

location.href = location.hrefest ce que j'utilise habituellement, mais merci pour les autres. Très utile! +1
Amal Murali

1
@ Cԃ ա ԃ Enfin, je peux reproduire ce que vous voyez et j'ai demandé ici .
Ionică Bizău

202

Beaucoup de façons fonctionneront, je suppose:

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

41
Cela window.location.href=window.location.href;ne fera rien si votre URL a un # / hashbang à la fin example.com/something#blah:
AaronLS

18
Au cas où quelqu'un se demanderait quelle est la différence entre location.reload()et history.go(0)est: il n'y en a pas. La section pertinente de la spécification HTML 5 sur w3.org/TR/html5/browsers.html#dom-history-go indique explicitement qu'ils sont équivalents: "Lorsque la go(delta)méthode est invoquée, si l'argument de la méthode a été omis ou a la valeur zéro, l'agent utilisateur doit agir comme si la location.reload()méthode était appelée à la place. "
Mark Amery

Le seul qui a fonctionné pour moi était celui-ci: window.location.href = window.location.href;
Yster

123

Pour recharger une page avec jQuery, procédez comme suit:

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

L'approche ici que j'ai utilisée était Ajax jQuery. Je l'ai testé sur Chrome 13. Ensuite, j'ai mis le code dans le gestionnaire qui déclenchera le rechargement. L' URL est "", ce qui signifie cette page .


68
Downvoting. Cela ne répond pas vraiment à la question, mais montre à la place comment remplacer le code HTML de la page par une réponse Ajax. C'est différent du rechargement de la page: par exemple, je travaille avec une situation en ce moment où cela ne fonctionnerait pas pour résoudre le problème d'origine.
Marnen Laibow-Koser

5
Un problème avec le rechargement de l'intégralité du HTML comme celui-ci est d'avoir à appeler manuellement les événements onload / ready et d'atténuer l'écrasement des variables précédemment déclarées dont vous souhaiterez peut-être conserver l'état après l'actualisation.
PassKit

3
Sauf si vous êtes très prudent avec votre code ce sera conduire à des fuites de mémoire où vous avez des gestionnaires d'événements ATTENANTS tels sans les détacher avant de remplacer le code qu'ils sont attachés.
Daniel Llewellyn

J'utilise ceci pour recharger notre tableau de bord à chaque seconde, zéro scintillement! C'est l'api comète / json du pauvre. Merci à @DanielLlewellyn et al. pour les avertissements.
William Entriken

3
Quelques personnes ont indiqué que cette approche est utile pour actualiser uniquement une partie de la page. Ça ne l'est pas. Je pense que ces gens comprennent mal le contextparamètre $.ajaxet s'attendent à ce qu'il fasse en quelque sorte une sorte de magie. Il ne fait que définir la thisvaleur des fonctions de rappel . Ajax à une URL de ""frappera l'URL sur laquelle vous êtes actuellement, chargeant ainsi habituellement le HTML complet (y compris <html>et <head>et <body>), et rien dans cette réponse ne filtre les choses que vous ne voulez pas.
Mark Amery

107

Si la page actuelle a été chargée par une requête POST, vous pouvez 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 qui a été chargée par une demande POST.


12
Cela perdra cependant la chaîne de requête, tandis que window.location = window.location ne le sera pas
mrmillsy

@mrmillsy window.location = window.locationest également imparfait, cependant; il ne fait rien s'il y a un fragment (hashbang) dans l'URL actuelle.
Mark Amery du

64

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.


55

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 à récupérer la page du serveur pour se débarrasser du cache également.

Ou juste

location.reload()

si vous voulez une mise en cache simple et rapide.


41

Trois approches avec différents comportements liés au cache:

  • location.reload(true)

    Dans les navigateurs qui implémentent le forcedReloadparamètre de location.reload(), se recharge en récupérant une nouvelle copie de la page et de toutes ses ressources (scripts, feuilles de style, images, etc.). Ne servira pas les ressources du cache - obtient de nouvelles copies du serveur sans envoyer if-modified-sinceouif-none-match têtes dans la demande.

    Equivalent à l'utilisateur effectuant un "rechargement dur" dans les navigateurs lorsque cela est possible.

    Notez que le passage trueà location.reload()est pris en charge dans Firefox (voir MDN ) et Internet Explorer (voir MSDN ) mais n'est pas pris en charge universellement et ne fait pas partie de la spécification W3 HTML 5 , ni de la spécification W3 HTML HTML 5.1 , ni du WHATWG HTML Living Standard .

    Dans les navigateurs non compatibles, comme Google Chrome, location.reload(true)se comporte de la même manière que location.reload().

  • location.reload() ou location.reload(false)

    Recharge la page, en récupérant une nouvelle copie non mise en cache du HTML de la page elle-même et en exécutant les demandes de revalidation RFC 7234 pour toutes les ressources (comme les scripts) que le navigateur a mises en cache, même si elles sont fraîches RFC 7234 permet au navigateur de servir sans revalidation.

    Exactement comment le navigateur doit utiliser son cache lors de l'exécution d'un location.reload() autant que je appel n'est pas spécifiée ou documentée; J'ai déterminé le comportement ci-dessus par expérimentation.

    Cela équivaut à ce que l'utilisateur appuie simplement sur le bouton "rafraîchir" de son navigateur.

  • location = location(ou infiniment d'autres techniques possibles qui impliquent l'attribution à locationou à ses propriétés)

    Fonctionne uniquement si l'URL de la page ne contient pas de fragid / hashbang!

    Recharge la page sans récupérer ni revalider les nouvelles ressources du cache. Si le code HTML de la page lui-même est récent, cela rechargera la page sans effectuer aucune requête HTTP.

    Cela équivaut (du point de vue de la mise en cache) à l'ouverture de la page par l'utilisateur dans un nouvel onglet.

    Cependant, si l'URL de la page contient un hachage, cela n'aura aucun effet.

    Encore une fois, le comportement de mise en cache ici n'est pas spécifié pour autant que je sache; Je l'ai déterminé en testant.

Donc, en résumé, vous souhaitez utiliser:

  • location = locationpour une utilisation maximale du cache, tant que la page n'a pas de hachage dans son URL, auquel cas cela ne fonctionnera pas
  • location.reload(true)pour récupérer de nouvelles copies de toutes les ressources sans revalider (bien que ce ne soit pas universellement pris en charge et ne se comportera pas différemment de location.reload()certains navigateurs, comme Chrome)
  • location.reload() pour reproduire fidèlement l'effet de l'utilisateur en cliquant sur le bouton «rafraîchir».

+1 pour l'emplacement = emplacement; peu de gens semblent le suggérer bien qu'il soit plus court que la plupart des réponses fournies, le seul inconvénient est sa lisibilité, je suppose, alors que location.reload () est un peu plus sémantique
Brandito

@Brandito Plus important encore, location = locationne fonctionne pas s'il y a un hachage dans l'URL. Pour tout site qui utilise des fragids - ou même pour tout site où un lien vers une page pourrait éventuellement ajouter un fragid à l'URL - cela le rend cassé.
Mark Amery

26

window.location.reload() se 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.URLretourne beaucoup plus rapidement et avec moins de trafic. Mais il ne rechargera pas la page s'il y a un hachage (#) dans l'URL.


Ce comportement est vrai dans Chrome, au moins - location.reload()force la revalidation des ressources mises en cache, même sans arguments, tandis qu'il window.location = document.URLest heureux de servir les ressources mises en cache sans toucher le serveur tant qu'elles sont fraîches.
Mark Amery

17

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

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

4
Non, ce n'est pas un rafraîchissement de page.
Mark Amery

16

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

Solution JavaScript simple et simple :

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

location.reload();

Ce que beaucoup de gens manquent ici, car ils espèrent obtenir des "points", c'est que la fonction reload () elle-même propose un booléen comme paramètre (détails: https://developer.mozilla.org/en-US/docs/Web / API / Emplacement / recharger ).

La méthode Location.reload () recharge la ressource à partir de l'URL actuelle. Son paramètre unique facultatif est un booléen qui, lorsqu'il est vrai, entraîne le rechargement de la page à partir du serveur. S'il est faux ou non spécifié, le navigateur peut recharger la page depuis son cache.

Cela signifie qu'il existe deux façons:

Solution 1: forcer le rechargement de la page actuelle à 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 et écouter un événement, je recommanderais d'utiliser la méthode ".on ()" au lieu de ".click" ou d'autres wrappers d'événement, par exemple une solution plus appropriée serait:

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

15

Voici une solution qui recharge de manière asynchrone une page à l'aide de jQuery. Il évite le scintillement provoqué 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 téléviseur à écran d'information à 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:

  • L'utilisation $.ajaxdirecte comme les $.get('',function(data){$(document.body).html(data)}) fichiers css / js permet de contourner le cache , même si vous utilisez cache: true, c'est pourquoi nous utilisonsparseHTML
  • parseHTMLne trouvera PAS d' bodyétiquette, donc tout votre corps doit aller dans une div 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 celadiv
  • À utiliser http-equiv="refresh"au cas où quelque chose se passe mal avec le hoquet javascript / serveur, la page se rechargera TOUJOURS sans que vous receviez un appel téléphonique
  • Cette approche fuit probablement la mémoire d'une manière ou d'une autre, les http-equivcorrectifs

14

j'ai trouvé

window.location.href = "";

ou

window.location.href = null;

fait également un rafraîchissement de page.

Cela facilite grandement le rechargement de la page en supprimant tout hachage. C'est très bien lorsque j'utilise AngularJS dans le simulateur iOS, de sorte que je n'ai pas à relancer l'application.


belle séance, je n'étais pas au courant de ça.
Junaid Atari

9

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

Avec trueparamètre

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

Avec default/ falseparamètre

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

Utilisation de jquery

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

8

Vous n'avez besoin de rien de jQuery, pour recharger une page en utilisant du JavaScript pur , utilisez simplement la fonction de rechargement sur une propriété d'emplacement 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, passez simplement une vraie valeur à la méthode de rechargement comme ci-dessous ...

window.location.reload(true);

De plus, si vous êtes déjà dans la portée de la fenêtre , vous pouvez vous débarrasser de la fenêtre et faire:

location.reload();

8

utilisation

location.reload();

ou

window.location.reload();

OP mentionné spécifiquement "avec jQuery" (même si comme beaucoup l'ont déjà noté, cela ne devrait peut-être pas être une question jQuery)
RomainValeri

3

Utiliser onclick="return location.reload();"dans la balise du bouton.

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

3

Si vous utilisez jQuery et que vous souhaitez actualiser, essayez d'ajouter votre jQuery dans une fonction javascript:

Je voulais cacher un iframe d'une page en cliquant sur oh an h3, pour moi cela a fonctionné mais je n'ai pas pu cliquer sur l'élément qui m'a permis de voir le iframepour commencer sauf si j'ai actualisé le navigateur manuellement ... pas idéal.

J'ai essayé ce qui suit:

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

Le mélange du javascript Jane simple 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);

3

Toutes les réponses ici sont bonnes. Étant donné que la question précise sur le rechargement de la page avec, Je pensais juste ajouter quelque chose de plus pour les futurs lecteurs.

jQuery est une bibliothèque JavaScript multiplateformeconçue pour simplifier les scripts côté client de HTML.

~ Wikipedia ~

Vous comprendrez donc que le fondement de , ou est basé sur . Donc, aller avec pure est bien meilleur quand il s'agit de choses simples.

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

$(location).attr('href', '');

2

Il existe de nombreuses façons de recharger les pages actuelles, mais en utilisant ces approches, vous pouvez voir la page mise à jour mais pas avec peu de valeurs de cache sera là, donc surmontez ce problème ou si vous souhaitez faire des demandes dures, utilisez le code ci-dessous.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

2
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Il y a déjà peu de réponses suggérant cela.
Dharman

Génial, cette mise à jour également du serveur
Alemoh Rapheal Baja

1

Solution Javascript simple:

 location = location; 

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



1

Vous pouvez l'écrire de deux manières. Le premier est le moyen standard de recharger la page également appelé rafraîchissement simple

location.reload(); //simple refresh

Et un autre est appelé le rafraîchissement dur . Ici, vous passez l'expression booléenne et la définissez sur true. Cela rechargera la page en détruisant l'ancien cache et en affichant le contenu à partir de zéro.

location.reload(true);//hard refresh

1
Les réponses uniquement codées sont généralement mal vues sur ce site. Pourriez-vous modifier votre réponse pour inclure des commentaires ou des explications sur votre code? Les explications devraient répondre à des questions telles que: Que fait-il? Comment ça marche? Où est-ce que ça va? Comment résout-il le problème d'OP? Voir: Comment répondre . Merci!
Eduardo Baitello


0
$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

-1

Voici quelques lignes de code que vous pouvez utiliser pour recharger la page à l' aide de jQuery .

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

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

Choisissez simplement de 1 à 10 qui convient à vos besoins ou ajoutez-en plus en fonction du modèle et des réponses avant cela.

<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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.