Botón que actualiza la página al hacer clic


108

Necesito un botón que actualice la página cuando el usuario haga clic. Probé esto:

<input type="button" value="Reload Page" onClick="reload">

o

<input type="button" value="Refresh Page" onClick="refresh">

Pero ninguno funcionó.

Respuestas:


237

Usar onClickcon window.location.reload(), es decir:

<button onClick="window.location.reload();">Refresh Page</button>

O history.go(0), es decir:

<button onClick="history.go(0);">Refresh Page</button>

O window.location.href=window.location.hrefpara recarga ' completa ', es decir:

<button onClick="window.location.href=window.location.href">Refresh Page</button>

El elemento Botón - developer.mozilla.org


2
¿Cuál es la diferencia entre estas tres opciones? ¿Es uno mejor que los demás para algunas situaciones?
ashleedawg

No creo que tengan ventajas entre sí, solo diferentes formas de lograr lo mismo.
CONvid19

1
No levantaré la nariz sino un ";" falta al final de onClick = "window.location.reload ();"
guido _nhcol.com.br_

1
toda esta pregunta es de sintaxis incorrecta ... Me sorprende que tenga casi 200 votos a favor. En primer lugar, el botón necesita una etiqueta de cierre en cada uno y, en segundo lugar, el valor no es un atributo de las etiquetas de botón, el texto debe ir entre la etiqueta y la etiqueta de cierre
Mister SirCode

@TaylorS Tienes toda la razón, he actualizado la respuesta, gracias.
CONvid19

10

Esto funciona para mi

HTML

    <button type="submit"  onClick="refreshPage()">Refresh Button</button>

JavaScript

<script>
function refreshPage(){
    window.location.reload();
} 
</script>

7
<a onClick="window.location.reload()">Refresh</a>

Esto realmente funciona perfecto para mí.


6

Solo esta página realmente recarga (hoy)

<input type="button" value="Refresh Page" onClick="location.href=location.href">

Otros no se recargan exactamente. Mantienen los valores dentro de los cuadros de texto.


¿Puede explicar qué quiere decir con: " Sólo esta página realmente recarga (Hoy) "?
CONvid19

"Hoy" significa el día en que lo escribí (porque todos los días algo cambia). "Sólo esto" es relevante para las respuestas dadas anteriormente por Pedro Lobito.
ilias iliadis

2
Todas las respuestas en SO son "a partir de hoy " y están sujetas a actualización si algo cambia, esa es la naturaleza de casi todo en la vida, no solo las respuestas.
CONvid19

5

botón que actualiza la página al hacer clic

Utilice el botón onClick con window.location.reload ():

<button onClick="window.location.reload();">

4
<button onclick=location=URL>Refresh</button>

Esto puede parecer divertido, pero realmente funciona.


4

Noté que todas las respuestas aquí usan en línea onClick controladores en . Generalmente se recomienda mantener HTML y Javascript separados.

Aquí hay una respuesta que agrega un detector de eventos de clic directamente al botón. Cuando se hace clic, llama a location.reload, lo que hace que la página se vuelva a cargar con la URL actual.

const refreshButton = document.querySelector('.refresh-button');

const refreshPage = () => {
  location.reload();
}

refreshButton.addEventListener('click', refreshPage)
.demo-image {
  display: block;
}
<button class="refresh-button">Refresh!</button>
<img class="demo-image" src="https://picsum.photos/200/300">


3

simplemente cree la referencia vacía en un enlace como el siguiente

 <a href="" onclick="dummy(0);return false;" >

1

Use esto, funciona bien para mí para volver a cargar la misma página:

<button onClick="window.location.reload();">

0

Aunque la pregunta es para button, pero si alguien quiere actualizar la página usando <a>, simplemente puede hacer

<a href="./">Reload</a>

0
<button onClick="window.location.reload();">Reload</button>

O también puedes usar

<form action="<same page url>" method="GET">
<button>Reload</button>
</form>

Nota: Cambie "<same page link>"con la URL de la misma página que desea volver a cargar. por ejemplo: <form action="home.html> method="GET">


-1

Si está buscando un restablecimiento de formulario:

<input type="reset" value="Reset Form Values"/>

o para restablecer otros aspectos del formulario no manejados por el navegador

<input type="reset" onclick="doFormReset();" value="Reset Form Values"/>

Usando jQuery

function doFormReset(){
    $(".invalid").removeClass("invalid");
}

-5
window.opener.location.href ='workItem.adm?wiId='+${param.wiId};

Irá a la ruta requerida y no recibirá ningún mensaje de reenvío.

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.