javascript - tiempo - refrescar pagina jquery automaticamente




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

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


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

Utiliza el envoltorio jQuery y extrae el elemento dom nativo.

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

Simplemente elija de 1 a 10 que se adapte a sus necesidades o agregue algunos 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>

Aquí hay una solución que recarga de forma asíncrona 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 panel de control. Está 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:

  • El uso de $.ajax directamente como $.get('',function(data){$(document.body).html(data)}) hace que los archivos css / js se quiebren , incluso si usas cache: true , por eso usamos parseHTML
  • parseHTML NO encontrará una etiqueta de body por lo que todo su cuerpo necesita ir en un div adicional, espero que este nugget de conocimiento lo ayude algún día, puede adivinar cómo elegimos la identificación para ese div
  • Use http-equiv="refresh" en caso de que algo salga mal con el problema de javascript / server, 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, las correcciones de actualización de http-equiv que

Es más corto en JavaScript.

location = '';

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

O solo

location.reload()

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


Hay muchas formas 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 tuviéramos que volver a extraer el documento del servidor web (por ejemplo, cuando los contenidos del documento cambian dinámicamente), pasaríamos el argumento como true .

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


La función de Load jQuery también puede realizar una actualización de la página:

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

Muchas formas funcionarán, supongo:

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

No necesitas nada de jQuery, para volver a cargar una página con JavaScript puro , solo usa la función de carga 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();

Puede utilizar el método de location.reload() JavaScript . Este método acepta un parámetro booleano. true o false Si el parámetro es true ; La página siempre se recarga desde el servidor. Si es false ; que es el navegador predeterminado o con parámetros vacíos, recargue la página desde su caché.

Con true parametro

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

Con parámetro default / false

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

Si está utilizando jQuery y desea actualizar, intente agregar 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 permitió ver el iframe a menos que haya actualizado el navegador manualmente ... no es ideal .

Intenté lo siguiente:

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

Mezclar el sencillo javascript de Jane 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);

Todas las respuestas aquí son buenas. Dado que la pregunta especifica cómo volver a cargar la página con jquery , solo pensé en agregar algo más para futuros lectores.

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

~ Wikipedia ~

Entonces entenderás que la base de jquery o jquery se basa en javascript . Así que ir con javascript puro es mucho mejor cuando se trata de cosas simples.

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

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

Tres enfoques con diferentes comportamientos relacionados con el caché:

  • location.reload(true)

    En los navegadores que implementan el parámetro forcedReload de location.reload() , forcedReload 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 ningún encabezado if-modified-since o if-none-match en la solicitud.

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

    Tenga en cuenta que pasar true a location.reload() es compatible con Firefox (ver location.reload() ) e Internet Explorer (ver MSDN ) pero no es compatible universalmente y no es parte de la especificación W3 HTML 5 , ni la especificación W3 borrador HTML 5.1 , ni El estándar de vida HTML WHATWG .

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

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

    Vuelve a cargar la página, obtiene una copia nueva y no almacenada en caché del propio 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 están actualizadas, RFC 7234 permite que el navegador sirva Ellos sin revalidación.

    Exactamente cómo el navegador debe utilizar su caché cuando realiza una llamada a location.reload() no está especificado ni documentado por lo que puedo decir; Determiné el comportamiento anterior mediante experimentación.

    Esto es equivalente al usuario simplemente presionando el botón "actualizar" en su navegador.

  • location = location (o infinitamente muchas otras técnicas posibles que involucran la asignación a una location o 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 volver a validar ningún recurso fresh de la memoria caché. Si el HTML de la página es nuevo, esto volverá a cargar la página sin realizar ninguna solicitud HTTP.

    Esto es equivalente (desde una perspectiva de almacenamiento en caché) al usuario que abre 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, por lo que sé; Lo determiné por la prueba.

Entonces, en resumen, quieres usar:

  • location = location para el uso máximo del 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 a location.reload() en algunos navegadores, como Chrome)
  • location.reload() para reproducir fielmente el efecto del usuario haciendo clic en el botón 'actualizar'.

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 recargar la página eliminando cualquier hash. Esto es muy bueno cuando uso AngularJS en el simulador de iOS, por lo que no tengo que volver a ejecutar la aplicación.


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

Entonces, si solo desea actualizar el HTML, window.location = document.URL regresará 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.


Utilice location.reload() :

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

La función reload() toma un parámetro opcional que puede configurarse como true para 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 volver a cargarse desde la memoria caché del navegador.





reload