javascript location - Come posso aggiornare una pagina con jQuery?




11 Answers

Usa location.reload() :

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

La funzione reload() accetta un parametro facoltativo che può essere impostato su true per forzare un ricaricamento dal server piuttosto che dalla cache. Il parametro è impostato su false , quindi per impostazione predefinita la pagina potrebbe ricaricarsi dalla cache del browser.

reload example

Come posso aggiornare una pagina con jQuery?




Ci sono molti modi per aggiornare una pagina con 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)

    Se avessimo bisogno di estrarre nuovamente il documento dal server Web (ad esempio, dove il contenuto del documento cambia dinamicamente) passeremmo l'argomento come true .

Puoi continuare a pubblicare l'elenco in modo creativo:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... e altri 534 modi

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>




Per ricaricare una pagina con jQuery, fai:

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

L'approccio che ho usato è stato Ajax jQuery. L'ho provato su Chrome 13. Quindi ho inserito il codice nel gestore che attiverà la ricarica. L' URL è "" , che significa questa pagina .




La domanda dovrebbe essere,

Come aggiornare una pagina con JavaScript

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

Hai solo l'imbarazzo della scelta.




Tre approcci con diversi comportamenti correlati alla cache:

  • location.reload(true)

    Nei browser che implementano il parametro forcedReload di location.reload() , viene ricaricato recuperando una nuova copia della pagina e tutte le relative risorse (script, fogli di stile, immagini e così via). Non servirà alcuna risorsa dalla cache: ottiene nuove copie dal server senza inviare intestazioni if-modified-since o if-none-match nella richiesta.

    Equivalente all'utente che esegue un "hard reload" nei browser dove è possibile.

    Nota che il passaggio true a location.reload() è supportato in Firefox (vedi location.reload() ) e Internet Explorer (vedi MSDN ) ma non è supportato universalmente e non fa parte della specifica HTML 5 di W3 , né della specifica HTML 5.1 di W3 , né lo standard di vita HTML WHATWG .

    Nei browser non supportati, come Google Chrome, location.reload(true) si comporta come location.reload() .

  • location.reload() o location.reload(false)

    Ricarica la pagina, recuperando una nuova copia della pagina HTML non memorizzata nella cache ed eseguendo richieste di riconvalida RFC 7234 per qualsiasi risorsa (come script) memorizzata nella cache del browser, anche se sono fresh RFC 7234 consente al browser di servire loro senza rinnovo.

    Esattamente come il browser dovrebbe utilizzare la propria cache quando si esegue una chiamata location.reload() non specificata o documentata per quanto posso dire; Ho determinato il comportamento sopra per sperimentazione.

    Questo è equivalente all'utente che preme semplicemente il pulsante "Aggiorna" nel proprio browser.

  • location = location (o infinitamente molte altre tecniche possibili che prevedono l'assegnazione alla location o alle sue proprietà)

    Funziona solo se l'URL della pagina non contiene un hashbang / fragido!

    Ricarica la pagina senza reinstradare o riconvalidare eventuali fresh risorse dalla cache. Se l'HTML della pagina stessa è nuovo, questo ricaricherà la pagina senza eseguire alcuna richiesta HTTP.

    Questo è equivalente (da una prospettiva di memorizzazione nella cache) all'utente che apre la pagina in una nuova scheda.

    Tuttavia, se l'URL della pagina contiene un hash, questo non avrà alcun effetto.

    Di nuovo, il comportamento del caching qui non è specificato per quanto ne so; L'ho determinato testando.

Quindi, in sintesi, vuoi usare:

  • location = location per il massimo utilizzo della cache, purché la pagina non abbia un hash nel suo URL, nel qual caso ciò non funzionerà
  • location.reload(true) per recuperare nuove copie di tutte le risorse senza riconvalida (sebbene non sia universalmente supportato e non si comporterà diversamente da location.reload() in alcuni browser, come Chrome)
  • location.reload() per riprodurre fedelmente l'effetto dell'utente cliccando sul pulsante 'Aggiorna'.



La funzione jQuery Load può anche eseguire un aggiornamento della pagina:

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



Poiché la domanda è generica, proviamo a riassumere possibili soluzioni per la risposta:

Semplice soluzione JavaScript semplice :

Il modo più semplice è una soluzione a una riga inserita in modo appropriato:

location.reload();

Quante persone mancano qui, perché sperano di ottenere alcuni "punti" è che la funzione reload () stessa offre un parametro booleano come parametro (dettagli: location.reload() ).

Il metodo Location.reload () ricarica la risorsa dall'URL corrente. Il suo parametro univoco opzionale è un booleano, che, quando è vero, fa sì che la pagina venga sempre ricaricata dal server. Se è falso o non specificato, il browser può ricaricare la pagina dalla sua cache.

Questo significa che ci sono due modi:

Soluzione 1: forzare il ricaricamento della pagina corrente dal server

location.reload(true);

Soluzione2: Ricarica dalla cache o dal server (in base al browser e alla configurazione)

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

E se vuoi combinarlo con jQuery ascoltando un evento, ti consiglio di utilizzare il metodo ".on ()" invece di ".click" o altri wrapper di eventi, ad esempio una soluzione più appropriata sarebbe:

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



È possibile utilizzare il metodo JavaScript location.reload() . Questo metodo accetta un parametro booleano. true o false . Se il parametro è true ; la pagina viene sempre ricaricata dal server. Se è false ; che è il default o con il browser dei parametri vuoto ricarica la pagina dalla sua cache.

Con true parametro

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

Con parametro default / false

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

Utilizzando jquery

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



Se stai usando jQuery e vuoi aggiornare, prova ad aggiungere jQuery in una funzione javascript:

Volevo nascondere un iframe da una pagina quando facevo clic su oh un h3 , per me funzionava ma non ero in grado di fare clic sull'elemento che mi permetteva di visualizzare l' iframe per cominciare a meno che non avessi aggiornato manualmente il browser ... non ideale .

Ho provato il seguente:

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

Mescolando Jane javascript con jQuery dovrebbe funzionare.

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



Usa onclick="return location.reload();" all'interno del tag button.

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



Ecco alcune linee di codice che puoi utilizzare per ricaricare la pagina usando jQuery .

Usa il wrapper jQuery ed estrae l'elemento dom nativo.

Usalo se vuoi solo una sensazione jQuery sul tuo codice e non ti interessa la velocità / le prestazioni del codice.

Scegli tra 1 e 10 che si adattino alle tue esigenze o aggiungine un altro in base al modello e alle risposte precedenti.

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



Related