javascript location - Come posso aggiornare una pagina con jQuery?



reload example (19)

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

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>


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

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>

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 .


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>

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

È il più breve in JavaScript.

location = '';

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

Ecco una soluzione che ricarica in modo asincrono una pagina usando jQuery. Evita lo sfarfallio causato da window.location = window.location . Questo esempio mostra una pagina che si ricarica continuamente, come in una dashboard. È testato in battaglia e funziona su una TV con display informativo a 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>

Gli appunti:

  • Usando $.ajax direttamente come $.get('',function(data){$(document.body).html(data)}) fa sì che i file css / js vengano cancellati dalla cache , anche se si utilizza la cache: true , è per questo che usiamo parseHTML
  • parseHTML NON troverà un tag del body modo che tutto il tuo corpo abbia bisogno di andare in un div extra, spero che questa pepita di conoscenza ti aiuti un giorno, puoi indovinare come abbiamo scelto l'id per quel div
  • Usa http-equiv="refresh" nel caso in cui qualcosa vada storto con javascript / hiccup del server, quindi la pagina sarà ANCORA ricaricata senza che tu riceva una telefonata
  • Questo approccio probabilmente perde la memoria in qualche modo, l'aggiornamento http-equiv risolve il problema

Non hai bisogno di nulla da jQuery, per ricaricare una pagina usando puro JavaScript , basta usare la funzione di ricarica sulla proprietà posizione come questa:

window.location.reload();

Per impostazione predefinita, questo ricaricherà la pagina utilizzando la cache del browser (se esiste) ...

Se ti piacerebbe fare forza ricaricare la pagina, basta passare un valore reale per ricaricare il metodo come di seguito ...

window.location.reload(true);

Inoltre, se sei già in ambito finestra , puoi sbarazzarti della finestra e fare:

location.reload();

Potresti volerlo usare

location.reload(forceGet)

forceGet è un booleano e facoltativo.

L'impostazione predefinita è false che ricarica la pagina dalla cache.

Impostare questo parametro su true se si desidera forzare il browser ad ottenere la pagina dal server per eliminare anche la cache.

O semplicemente

location.reload()

se vuoi veloce e facile con il caching.


window.location.reload() si ricaricherà dal server e caricherà nuovamente tutti i dati, script, immagini, ecc.

Quindi, se vuoi semplicemente aggiornare l'HTML, window.location = document.URL tornerà molto più veloce e con meno traffico. Ma non ricaricherà la pagina se c'è un hash (#) nell'URL.


ho trovato

window.location.href = "";

o

window.location.href = null;

rende anche una pagina di aggiornamento.

Questo rende molto più facile ricaricare la pagina rimuovendo qualsiasi hash. Questo è molto bello quando utilizzo AngularJS nel simulatore iOS, in modo da non dover eseguire nuovamente l'app.


Un sacco di modi funzionerà, suppongo:

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

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.


Questo dovrebbe funzionare su tutti i browser anche senza jQuery:

location.reload();

Tutte le risposte qui sono buone. Poiché la domanda specifica di ricaricare la pagina con jquery , ho solo pensato di aggiungere qualcosa in più ai futuri lettori.

jQuery è una libreria JavaScript multipiattaforma progettata per semplificare lo scripting lato client di HTML.

~ Wikipedia ~

Quindi capirai che la base di jquery o jquery è basata su javascript . Quindi andare con javascript puro è molto meglio quando si tratta di cose semplici.

Ma se hai bisogno di una soluzione jquery , eccone una.

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

Mi sono imbattuto nello stesso identico problema. Ho una casella di controllo ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

Nel codice jQuery ho usato il seguente selettore per verificare se la casella di controllo è stata selezionata o meno, e sembra funzionare come un incantesimo.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Sono sicuro che puoi usare l'ID invece di CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Spero che questo ti aiuta.





javascript jquery refresh reload