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

2596

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

4
  • 32
    Dado que jQuery es un marco de javascript para facilitar la manipulación de DOM y el enlace de eventos, le recomendaría que solicite javascript en lugar de jQuery. WΩLLE - ˈvɔlə 4 de agosto de 2014 a las 13:56
  • 21
    No necesitas jQuery para esto. Stardust 1 de enero de 2016 a las 17:59
  • 18
    Más relevante que nunca: needsmorejquery.comKartik Chugh 11 de agosto de 2017 a las 3:55
  • @Stardust No necesitas jQuery para nada de lo que haces con jQuery debido a todo lo posible con JavaScript si puedes hacerlo con jQuery. I am the Most Stupid Person 19 de julio de 2019 a las 4:42
4015
+50

Utilizar 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 caché. El parámetro predeterminado es false, por lo que, de manera predeterminada, la página puede volver a cargarse desde la memoria caché del navegador.

7
  • 31
    Esto no funcionó para mí. Sin embargo, esto funcionó: window.location.href = window.location.href; Yster 8 dic 2015 a las 9:20
  • 6
    Esto no funcionó para mí. window.location.href=window.location.href;y location.href=location.href;trabajado. twharmon 6 oct 2016 a las 6:40
  • 24
    window.location.reload(true);se actualizará de forma dura, de lo contrario, por defecto es falsoSagar Naliyapara 25/04/2017 a las 6:39
  • @Sagar N, esto también funciona para mí. Gracias. Lo intenté los últimos días con un enfoque diferente, pero su solución me salvó. Ludus H 14/12/2017 a las 15:21
  • 2
    @FaridAbbas location.reload();es javascript estándar. No necesitas jQuery para eso. Mark Baijens 2 de ene. De 2020 a las 17:06
484
+400

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)

    If we needed to pull the document from the web-server again (such as where the document contents change dynamically) we would pass the argument as true.

Puedes seguir 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>
5
  • 11
    +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 recarga, y 2-5 hacen que la recarga de la página sea "imperceptible". En la herramienta de desarrollo en Chrome, puedo ver que la página se regenera, pero ¿podría explicar que el proceso de redibujo es diferente? Por favor. Gracias de antemano. Cԃաԃ 25 de junio de 2013 a las 7:21
  • @ Cԃ ա ԃ No veo ninguna diferencia ... ¿Quizás el caché es el problema? Pronto echaré un vistazo. Ionică Bizău 9 de julio de 2013 a las 15:22
  • 2
    1 y 6 (reload()/(false))son más lentos. mmm. interesante. :) y 1 y 6 son los mismos que reload()el parámetro predeterminado false. Cԃաԃ 19 de julio de 2013 a las 0:32
  • 1
    location.href = location.hrefes lo que suelo usar, pero gracias por los demás. ¡Muy útil! +1Amal Murali 25 dic '13 a las 16:10
  • 1
    @ Cԃ ա ԃ Finalmente puedo reproducir lo que ves y te lo pregunté aquí . Ionică Bizău 31/12/2013 a las 13:49
467

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

location.reload();
1
211

Muchas formas funcionarán, supongo:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
4
  • 41
    Esto window.location.href=window.location.href;no hará nada si su URL tiene un # / hashbang al final example.com/something#blah:AaronLS 12/06/2013 a las 16:01
  • 18
    En caso de que alguien se pregunte cuál es la diferencia entre location.reload()y history.go(0): 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 el argumento del método se omitió o el valor cero, el agente de usuario debe actuar como si se hubiera location.reload()llamado al método en su lugar ". Mark Amery 19/10/15 a las 20:49
  • El único que funcionó para mí fue este: window.location.href = window.location.href; Yster 8 de diciembre de 2015 a las 9:10
  • window.location.href = window.location.href funcionó para míRohit Singh 1 de abril a las 8:10
124

Para recargar una página con jQuery, haz lo siguiente:

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

El enfoque aquí que utilicé 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 .

7
  • 69
    Votación en contra. Esto realmente no responde a 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 29 de septiembre de 2012 a las 1:39
  • 6
    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 las variables declaradas previamente cuyo estado es posible que desee conservar después de la actualización. PassKit 14 de marzo de 2013 a las 7:41
  • 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 6 de septiembre de 2013 a las 21:25
  • Estoy usando esto para recargar nuestro tablero cada segundo, ¡sin parpadeo! Es la api cometa / json del pobre hombre. Gracias a @DanielLlewellyn et al. para las advertencias. William Entriken 13/0214 a las 17:38
  • 5
    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 están malinterpretando 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 ""llegará a la URL en la que se encuentra actualmente, por lo que normalmente carga el HTML completo (incluidos <html>y <head>y <body>), y nada en esta respuesta filtra las cosas que no desea. Mark Amery 19/10/15 a las 21:20
109

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

window.location = window.location.pathname;

en lugar de

window.location.reload();

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

2
  • 13
    Sin embargo, esto perderá la cadena de consulta, mientras que window.location = window.location no lo harámrmillsy 15 de noviembre de 2013 a las 15:08
  • 1
    Sin window.location = window.locationembargo, @mrmillsy también es imperfecto; no hace nada si hay un fragid (hashbang) en la URL actual. Mark Amery 19/10/15 a las 21:30
65

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

Tiene muchas opciones para elegir.

0
56

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 de la caché también.

O solo

location.reload()

si lo desea de forma rápida y sencilla con el almacenamiento en caché.

0
41

Tres enfoques con diferentes comportamientos relacionados con la caché:

  • location.reload(true)

    En los navegadores que implementan el forcedReloadparámetro de location.reload(), recarga obteniendo una copia nueva de la página y todos sus recursos (scripts, hojas de estilo, imágenes, etc.). No servirá ningún recursos de la caché - obtiene copias nuevas desde el servidor sin enviar ninguna if-modified-sinceo if-none-matchcabeceras de la petición.

    Equivalente a que el usuario realice una "recarga completa" en los navegadores cuando sea posible.

    Tenga en cuenta que el paso truea location.reload()es compatible con Firefox (consulte MDN ) e Internet Explorer (consulte MSDN ), pero no es compatible universalmente y no es parte de la especificación W3 HTML 5 , ni la especificación W3 draft HTML 5.1 , ni el 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, obtiene una copia nueva, no almacenada en caché del HTML de la página y realiza solicitudes de revalidación RFC 7234 para cualquier recurso (como scripts) que el navegador haya almacenado en caché, incluso si son nuevos , RFC 7234 permite que el navegador sirva ellos sin revalidación.

    location.reload()Hasta donde yo sé, no se especifica ni se documenta exactamente cómo el navegador debe utilizar su caché al realizar una llamada; Determiné el comportamiento anterior mediante experimentación.

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

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

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

    Vuelve a cargar la página sin recuperar ni revalidar ningún recurso nuevo de la caché. Si el HTML de la página es nuevo, se 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, desea usar:

  • location = locationpara un uso máximo de la 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 del usuario al hacer clic en el botón "actualizar".
2
  • +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ánticobrandito 16 feb 2018 a las 5:09
  • @Brandito Más importante aún, location = locationno funciona si hay un hash en la URL. Para cualquier sitio que use fragids, o incluso para cualquier sitio en el que alguien que se vincule a una página posiblemente agregue un fragid a la URL, eso hace que se rompa. Mark Amery 16 feb 2018 a las 15:12
26

window.location.reload() se recargará 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.

1
  • 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.URLestá feliz de servir recursos almacenados en caché sin afectar al servidor siempre que estén frescos. Mark Amery 20 oct 2015 a las 3:53
17

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

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
1
  • 4
    No, esto no es una actualización de página. Mark Amery 20 oct 2015 a las 3:55
17

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

Solución simple de JavaScript simple :

La forma más sencilla es una solución de una línea colocada de forma adecuada:

location.reload();

Lo que muchas personas se pierden 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 / recargar ).

The Location.reload() method reloads the resource from the current URL. Its optional unique parameter is a Boolean, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

Esto significa que hay dos formas:

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

location.reload(true);

Solución 2: recarga desde la caché o el 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);
});
1
15

Aquí hay una solución que recarga asincrónicamente una página usando jQuery. Evita el parpadeo provocado por window.location = window.location. Este ejemplo muestra una página que se recarga continuamente, como en un tablero. Ha sido probado en batalla y se está ejecutando 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 like $.get('',function(data){$(document.body).html(data)}) hace 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 en 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 javascript / hipo del servidor, entonces la página TODAVÍA se recargará 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 una actualización de la página.

Esto hace que sea mucho más fácil volver a cargar 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.

1
  • buen rodaje, no era consciente de eso. Junaid Atari 24 de agosto de 2017 a las 17:48
9

Puede utilizar 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 lo es false; que es el predeterminado o con el navegador de parámetros vacío recarga 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>
0
8

No necesita nada de jQuery, para recargar una página usando JavaScript puro , solo use la función de recarga en la 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 para recargar el método 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

usar

location.reload();

o

window.location.reload();
1
  • OP mencionado específicamente "con jQuery" (aunque, como ya han señalado muchos, esto tal vez no debería ser una pregunta de jQuery)Romain Valeri 4 feb 2019 a las 17:52
3

Úselo 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 iframepara empezar a menos que actualizara el navegador manualmente ... no es lo ideal.

Intenté lo siguiente:

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

La combinación de javascript simple de Jane con su 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. Dado que la pregunta especifica sobre la recarga de la página con, Solo pensé en agregar algo más para futuros lectores.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

~ Wikipedia ~

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

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

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

Hay muchas formas de recargar las páginas actuales, pero de alguna manera usando esos enfoques puede ver la página actualizada, pero no con pocos valores de caché estará allí, así que supere ese problema o si desea realizar solicitudes difíciles, use 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>
0
1

Solución simple de Javascript:

 location = location; 

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

Probablemente el más corto (12 caracteres): historial de uso

history.go()
1

Puedes escribirlo de dos formas. La primera es la forma estándar de recargar la página, también llamada actualización simple.

location.reload(); //simple refresh

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

location.reload(true);//hard refresh
1
  • 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 una explicación de su código? Las explicaciones deben responder preguntas como: ¿Qué hace? ¿Cómo lo hace? ¿A dónde va? ¿Cómo resuelve el problema de OP? Consulte: Cómo responder . ¡Gracias! Eduardo Baitello 8 de noviembre de 2019 a las 1:48
1
$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});
0

Es el más corto en JavaScript.

window.location = '';
0
0

Todos ustedes pueden necesitar usar

    location.reload(forceGet)

forceGet es un booleano y opcional.

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

0

puede que necesites usar

 location.reload()

o también puede necesitar usar

location.reload(forceGet)

forceGet es un booleano y opcional.

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

-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 algunos más según el patrón y las respuestas anteriores.

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