¿Cómo puedo actualizar una página con jQuery?


2453

¿Cómo puedo actualizar una página con jQuery?


29
Dado que jQuery es un marco de JavaScript para una fácil manipulación DOM y enlace de eventos, le recomendaría que solicite JavaScript en lugar de jQuery.
WoIIe

19
No necesitas jQuery para esto.
Stardust el

13
Más relevante que nunca: needsmorejquery.com
Kartik Chugh

@Stardust No necesita jQuery para nada de lo que hace con jQuery debido a todo lo posible con JavaScript si puede hacerlo con jQuery.
Soy la persona más estúpida

Respuestas:


3828

Uso location.reload():

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

La reload()función toma un parámetro opcional que se puede configurar truepara forzar una recarga desde el servidor en lugar de la memoria caché. El parámetro predeterminado es false, por lo que, de forma predeterminada, la página puede recargarse desde la memoria caché del navegador.


29
Esto no funcionó para mí. Sin embargo, esto funcionó: window.location.href = window.location.href;
Yster

55
Esto no funcionó para mí. window.location.href=window.location.href;y location.href=location.href;trabajado
twharmon

23
window.location.reload(true);se actualizará por
completo

@Sagar N, esto también funciona para mí. Gracias. Lo intenté durante los últimos días con un enfoque diferente, pero su solución me salvó.
Ludus H

1
@FaridAbbas location.reload();es javascript estándar. No necesitas jQuery para ello.
Mark Baijens

457

Esto debería funcionar en todos los navegadores incluso sin jQuery:

location.reload();

450

Hay varias formas ilimitadas de actualizar una página 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)

    Si necesitáramos extraer el documento del servidor web nuevamente (como donde el contenido del documento cambia dinámicamente) pasaríamos el argumento como true.

Puede continuar la lista siendo creativo:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... y otras 534 formas

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 para la lista y jsfiddle. Tengo una pregunta, en jsfiddle 1 y 6 hacen que la página generada desaparezca por un momento mientras se vuelve a cargar, y 2-5 hacen que la recarga de la página sea "imperceptible". En la herramienta de desarrollo en Chrome, puedo ver la página que se está regenerando, pero ¿podría explicar que el proceso de redibujado es diferente? Por favor. Gracias de antemano.
Cԃ ա ԃ

@ Cԃ ա ԃ No veo ninguna diferencia ... ¿Quizás el problema es el caché? Voy a echar un vistazo pronto.
Ionică Bizău

2
1 y 6 (reload()/(false))son más lentos. hmmm interesante. :) y 1 y 6 son los mismos que reload()el parámetro predeterminado de false.
Cԃ ա ԃ

location.href = location.hrefes lo que suelo usar, pero gracias por los demás. ¡Muy útil! +1
Amal Murali

1
@ Cԃ ա ԃ Finalmente puedo reproducir lo que ves y pregunté aquí .
Ionică Bizău

202

Muchas maneras funcionarán, supongo:

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

41
Esto window.location.href=window.location.href;no hará nada si su URL tiene un # / hashbang al final example.com/something#blah:
AaronLS

18
En caso de que alguien se pregunte cuál es la diferencia entre location.reload()y history.go(0)es: no hay ninguno. La sección relevante de la especificación HTML 5 en w3.org/TR/html5/browsers.html#dom-history-go dicta explícitamente que son equivalentes: "Cuando go(delta)se invoca el método, si se omitió el argumento del método el valor cero, el agente de usuario debe actuar como si location.reload()se llamara al método en su lugar ".
Mark Amery

El único que funcionó para mí fue este: window.location.href = window.location.href;
Yster

123

Para volver a cargar una página con jQuery, haga:

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

El enfoque aquí que usé fue Ajax jQuery. Lo probé en Chrome 13. Luego puse el código en el controlador que activará la recarga. La URL es "", lo que significa esta página .


68
Votación a favor. Esto realmente no responde la pregunta, sino que muestra cómo reemplazar el HTML de la página con una respuesta Ajax. Eso es diferente de recargar la página: por ejemplo, estoy trabajando con una situación en este momento en la que esto no funcionaría para resolver el problema original.
Marnen Laibow-Koser

55
Un problema con la recarga de todo el HTML de esta manera es tener que llamar manualmente a los eventos onload / ready y mitigar la sobrescritura de variables previamente declaradas cuyo estado es posible que desee conservar después de la actualización.
PassKit

3
A menos que seas muy cuidadoso con su código esta será conducir a pérdidas de memoria, donde se encuentra conectado controladores de eventos y tal sin separarlos antes de cambiar el código que están unidos a.
Daniel Llewellyn

Estoy usando esto para recargar nuestro tablero cada segundo, ¡cero parpadeo! Es el pobre cometa / json api del hombre pobre. Gracias a @DanielLlewellyn et al. para advertencias.
William Entriken

3
Algunas personas han comentado que este enfoque es útil para actualizar solo una parte de la página. No lo es Creo que esas personas no entienden el contextparámetro $.ajaxy esperan que de alguna manera realice algún tipo de magia. Todo lo que hace es establecer el thisvalor de las funciones de devolución de llamada . Ajax a una URL de ""golpeará la URL en la que se encuentra actualmente, cargando normalmente el HTML completo (incluyendo <html>y <head>y <body>), y nada en esta respuesta filtra las cosas que no desea.
Mark Amery

107

Si la página actual se cargó mediante una solicitud POST, es posible que desee utilizar

window.location = window.location.pathname;

en vez de

window.location.reload();

porque window.location.reload()solicitará confirmación si se llama en una página cargada por una solicitud POST.


12
Sin embargo, esto perderá la cadena de consulta, mientras que window.location = window.location no lo hará
mrmillsy

@mrmillsy window.location = window.locationtambién es imperfecto, sin embargo; no hace nada si hay un fragid (hashbang) en la URL actual.
Mark Amery

64

La pregunta debería ser,

Cómo actualizar una página con JavaScript

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

Tienes muchas opciones para elegir.


55

Es posible que desee utilizar

location.reload(forceGet)

forceGet es un booleano y opcional.

El valor predeterminado es falso, que vuelve a cargar la página desde el caché.

Establezca este parámetro en verdadero si desea forzar al navegador a obtener la página del servidor para deshacerse también del caché.

O solo

location.reload()

si quieres rápido y fácil con el almacenamiento en caché.


41

Tres enfoques con diferentes comportamientos relacionados con el caché:

  • location.reload(true)

    En los navegadores que implementan el forcedReloadparámetro de location.reload(), se vuelve a cargar obteniendo una copia nueva de la página y todos sus recursos (scripts, hojas de estilo, imágenes, etc.). No servirá ningún recurso del caché: obtiene copias nuevas del servidor sin enviar ninguno if-modified-sinceo if-none-matchencabezados en la solicitud.

    Equivalente a que el usuario realice una "recarga dura" en los navegadores donde sea posible.

    Tenga en cuenta que pasar truea location.reload()es compatible con Firefox (consulte MDN ) e Internet Explorer (consulte MSDN ), pero no es compatible universalmente y no forma parte de la especificación W3 HTML 5 , ni de la especificación W3 draft HTML 5.1 , ni del WHATWG HTML Living Standard .

    En navegadores no compatibles, como Google Chrome, se location.reload(true)comporta igual que location.reload().

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

    Vuelve a cargar la página, ir a buscar un nuevo máximo, sin almacenamiento en caché copia de la propia página HTML, y la realización de RFC 7234 solicitudes de revalidación de los recursos (como guiones) que el navegador se ha almacenado en caché, incluso si son frescas son RFC 7234 permite que el navegador para servir ellos sin revalidación.

    Por location.reload()lo que puedo decir, no se especifica ni documenta exactamente cómo el navegador debe utilizar su caché cuando realiza una llamada; Determiné el comportamiento anterior por experimentación.

    Esto es equivalente a que el usuario simplemente presione el botón "actualizar" en su navegador.

  • location = location(o infinitamente muchas otras técnicas posibles que implican asignar ao locationa sus propiedades)

    ¡Solo funciona si la URL de la página no contiene un fragid / hashbang!

    Vuelve a cargar la página sin re-cargar o revalidar ningún frescas recursos de la caché. Si el HTML de la página en sí es nuevo, esto volverá a cargar la página sin realizar ninguna solicitud HTTP.

    Esto es equivalente (desde una perspectiva de almacenamiento en caché) a que el usuario abra la página en una nueva pestaña.

    Sin embargo, si la URL de la página contiene un hash, esto no tendrá ningún efecto.

    Una vez más, el comportamiento de almacenamiento en caché aquí no está especificado hasta donde yo sé; Lo determiné probando.

Entonces, en resumen, quieres usar:

  • location = locationpara un uso máximo de la memoria caché, siempre que la página no tenga un hash en su URL, en cuyo caso esto no funcionará
  • location.reload(true)para obtener nuevas copias de todos los recursos sin revalidar (aunque no es universalmente compatible y no se comportará de manera diferente location.reload()en algunos navegadores, como Chrome)
  • location.reload() para reproducir fielmente el efecto de que el usuario haga clic en el botón "actualizar".

+1 para ubicación = ubicación; no muchas personas parecen sugerirlo, aunque es más corto que la mayoría de las respuestas proporcionadas, el único inconveniente es su legibilidad, supongo, mientras que location.reload () es un poco más semántico
Brandito

@Brandito Más importante aún, location = locationno funciona si hay un hash en la URL. Para cualquier sitio que use frágiles, o incluso para cualquier sitio en el que alguien que enlace a una página podría agregar un frágil a la URL, eso hace que se rompa.
Mark Amery

26

window.location.reload() se volverá a cargar desde el servidor y volverá a cargar todos sus datos, scripts, imágenes, etc.

Entonces, si solo desea actualizar el HTML, window.location = document.URLvolverá mucho más rápido y con menos tráfico. Pero no volverá a cargar la página si hay un hash (#) en la URL.


Este comportamiento es cierto en Chrome, al menos: location.reload()fuerza la revalidación de los recursos almacenados en caché, incluso sin argumentos, mientras que window.location = document.URLse complace en servir los recursos almacenados en caché sin llegar al servidor siempre que estén frescos.
Mark Amery

17

La Loadfunción jQuery también puede realizar una actualización de página:

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

44
No, esto no es una actualización de la página.
Mark Amery

16

Como la pregunta es genérica, intentemos resumir las posibles soluciones para la respuesta:

Solución simple de JavaScript simple :

La forma más fácil es una solución de una línea colocada de manera apropiada:

location.reload();

Lo que falta a muchas personas aquí, porque esperan obtener algunos "puntos" es que la función reload () en sí misma ofrece un Booleano como parámetro (detalles: https://developer.mozilla.org/en-US/docs/Web / API / Ubicación / recarga ).

El método Location.reload () vuelve a cargar el recurso desde la URL actual. Su parámetro exclusivo opcional es un booleano, que, cuando es cierto, hace que la página se vuelva a cargar siempre desde el servidor. Si es falso o no se especifica, el navegador puede volver a cargar la página desde su caché.

Esto significa que hay dos formas:

Solución1: forzar la recarga de la página actual desde el servidor

location.reload(true);

Solución2: recarga desde caché o servidor (según el navegador y su configuración)

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

Y si desea combinarlo con jQuery y escuchar un evento, recomendaría usar el método ".on ()" en lugar de ".click" u otros contenedores de eventos, por ejemplo, una solución más adecuada sería:

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

15

Aquí hay una solución que recarga asincrónicamente una página usando jQuery. Evita el parpadeo causado por window.location = window.location. Este ejemplo muestra una página que se recarga continuamente, como en un tablero. Está probado en batalla y se ejecuta en un televisor con pantalla de información en 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>

Notas:

  • Usar $.ajaxdirectamente como $.get('',function(data){$(document.body).html(data)}) causa que los archivos css / js se rompan en caché , incluso si los usa cache: true, por eso usamosparseHTML
  • parseHTMLNO encontrará una bodyetiqueta, por lo que todo su cuerpo necesita ir a un div adicional, espero que esta pepita de conocimiento lo ayude algún día, puede adivinar cómo elegimos la identificación para esodiv
  • Úselo http-equiv="refresh"en caso de que algo salga mal con el problema de JavaScript / servidor, entonces la página TODAVÍA se volverá a cargar sin que reciba una llamada telefónica
  • Este enfoque probablemente pierde memoria de alguna manera, la http-equivactualización corrige que

14

encontré

window.location.href = "";

o

window.location.href = null;

También hace que una página se actualice.

Esto hace que sea mucho más fácil recargar la página eliminando cualquier hash. Esto es muy bueno cuando estoy usando AngularJS en el simulador de iOS, por lo que no tengo que volver a ejecutar la aplicación.


Buen disparo, no estaba al tanto de eso.
Junaid Atari

9

Puedes usar el método JavaScript location.reload() . Este método acepta un parámetro booleano. trueo false. Si el parámetro es true; la página siempre se recarga desde el servidor. Si se trata false; que es el valor predeterminado o con el navegador de parámetros vacío, vuelva a cargar la página desde su caché.

Con trueparámetro

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

Con default/ falseparámetro

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

Usando jquery

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

8

No necesita nada de jQuery, para recargar una página usando JavaScript puro , solo use la función de recarga en una propiedad de ubicación como esta:

window.location.reload();

De forma predeterminada, esto volverá a cargar la página utilizando el caché del navegador (si existe) ...

Si desea forzar la recarga de la página, simplemente pase un valor verdadero al método de recarga como se muestra a continuación ...

window.location.reload(true);

Además, si ya está en el alcance de la ventana , puede deshacerse de la ventana y hacer:

location.reload();

8

utilizar

location.reload();

o

window.location.reload();

OP mencionó específicamente "con jQuery" (aunque, como ya lo han señalado muchos, esto quizás no debería ser una pregunta de jQuery)
RomainValeri

3

Usar onclick="return location.reload();"dentro de la etiqueta del botón.

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

3

Si está utilizando jQuery y desea actualizar, intente agregar su jQuery en una función de JavaScript:

Quería ocultar un iframe de una página al hacer clic en oh an h3, para mí funcionó, pero no pude hacer clic en el elemento que me permitía ver el iframecomienzo, a menos que actualizara el navegador manualmente ... no es lo ideal.

Intenté lo siguiente:

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

Mezclar javascript javascript simple con tu jQuery debería funcionar.

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

Todas las respuestas aquí son buenas. Como la pregunta especifica sobre la recarga de la página con, Solo pensé en agregar algo más para futuros lectores.

jQuery es una biblioteca de JavaScript multiplataformadiseñada para simplificar las secuencias de comandos HTML del lado del cliente.

~ Wikipedia ~

Entonces entenderás que la base de o está basado en . Entonces yendo con puro es mucho mejor cuando se trata de cosas simples.

Pero si necesitas un solución, aquí hay uno.

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

2

Hay muchas maneras de volver a cargar las páginas actuales, pero de alguna manera usando esos enfoques, puede ver la página actualizada, pero no con pocos valores de caché, así que supere ese problema o si desea hacer solicitudes difíciles, utilice el siguiente código.

    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>

Ya hay pocas respuestas que sugieran esto.
Dharman el

Impresionante esto también actualizar desde el servidor
Alemoh Rapheal Baja

1

Solución Javascript simple:

 location = location; 

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



1

Puedes escribirlo de dos maneras. 1st es la forma estándar de volver a cargar la página, también llamada actualización simple

location.reload(); //simple refresh

Y otro se llama la actualización dura . Aquí pasa la expresión booleana y la establece en verdadero. Esto volverá a cargar la página destruyendo el caché anterior y mostrando el contenido desde cero.

location.reload(true);//hard refresh

1
Las respuestas de solo código generalmente están mal vistas en este sitio. ¿Podría editar su respuesta para incluir algunos comentarios o explicaciones de su código? Las explicaciones deben responder preguntas como: ¿Qué hace? Como lo hace ¿A dónde va? ¿Cómo resuelve el problema de OP? Ver: Cómo responder . ¡Gracias!
Eduardo Baitello


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

-1

Aquí hay algunas líneas de código que puede usar para recargar la página usando jQuery .

Utiliza el contenedor jQuery y extrae el elemento dom nativo.

Use esto si solo desea una sensación de jQuery en su código y no le importa la velocidad / rendimiento del código.

Simplemente elija del 1 al 10 que se adapte a sus necesidades o agregue un poco más según el patrón y las respuestas antes de esto.

<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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.