Comment actualiser une page avec jQuery?

Comment actualiser une page avec jQuery?

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.

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

location.reload();

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>

Beaucoup de façons fonctionneront, je suppose:

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

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 .

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.

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.

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.

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».

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.

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

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

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);
});

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

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.

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>

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();

utilisation

location.reload();

ou

window.location.reload();

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>

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);

Toutes les réponses ici sont bonnes. Étant donné que la question précise sur le rechargement de la page avecjquery, 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 jquery, ou jquery est basé sur javascript. Donc, aller avec purejavascript est bien meilleur quand il s'agit de choses simples.

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

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

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

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

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

Solution Javascript simple:

 location = location; 

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

Probablement le plus court (12 caractères) - historique d' utilisation

history.go()

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

Il est le plus court en JavaScript.

window.location = '';

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

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>