Enlace para recargar la página actual


175

¿Es posible tener un enlace normal que apunte a la ubicación actual?

Actualmente he encontrado 2 soluciones, pero una de ellas incluye JavaScript y en la otra debes conocer la ruta absoluta a la página:

<a href="#" onclick="window.location.reload(true);">1</a>
<a href="/foobar/">2</a>
<a href="#">3 (of course not working)</a>

¿Hay alguna forma de hacerlo, sin usar JavaScript o sin conocer la ruta absoluta?

Respuestas:


198

He estado usando:

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

Todavía no he encontrado un caso y / o navegador en el que no funciona como se esperaba.

Período significa la ruta actual. También puede usar ..para referirse a la carpeta sobre la ruta actual, por ejemplo, si tiene esta estructura de archivo:

page1.html
folder1
    page2.html

Luego puede page2.htmlescribir:

<a href="../page1.html">link to page 1</a>

EDITAR:

No estoy seguro de si el comportamiento ha cambiado o si siempre fue así, pero Chrome (y tal vez otros) tratará los períodos como se describió anteriormente con respecto a los directorios , no a los archivos. Esto significa que si estás en http://example.com/foo/bar.html, realmente estás en el directorio /foo/y un hrefvalor de .in bar.htmlhará referencia en /foo/lugar debar.html

Piense en ello como navegar por el sistema de archivos en una terminal; nunca puedes cden un archivo :)

EDITAR 2:

Parece que el comportamiento del uso href="."ya no es tan predecible, tanto Firefox como Chrome podrían haber cambiado la forma en que manejan estos. No confiaría completamente en mi respuesta original, sino que probaría tanto la cadena vacía como el período en diferentes navegadores para su uso específico y asegúrese de obtener el comportamiento deseado.


25
Sin embargo, debe tenerse en cuenta que los datos GET no se conservan con este método, considérelo una "recarga dura". El uso de un valor href vacío preservará los datos GET, pero borrará el valor hash (como #these). Usando # o? como valor href agregará "basura" a la nueva URL. He descubierto que usar period es la forma más limpia de lograr una recarga.
Markus Amalthea Magnuson el

55
Esta técnica no me funciona en Mac Chrome. Aunque usando "." como anhor, se comporta como si ".." y se vincula a la página principal. por ejemplo, / admin / stuff se convierte en / admin. ¿Alguien más está viendo este comportamiento?
Zac

3
Esta solución está mal. También en Chrome no funciona y apunta al directorio principal. Debería usar href vacío como sugiere
@MarkusAmaltheaMagnuson

8
Esto parece funcionar solo si el componente de ruta de la URL termina con un /.
Kos

66
A partir de hoy, esto no funciona en Firefox o Chrome. Ambos navegadores hacen referencia al directorio principal (no a la página actual) usando href = "."
jtubre

135

Ninguna de las otras respuestas preseleccionará ningún valor de cadena de consulta. Tratar

<a href="javascript:window.location.href=window.location.href">

Es cierto que esto implica javascript, pero, a menos que los usuarios tengan la secuencia de comandos deshabilitada, esto es bastante sencillo.


55
No funciona para mí (Google Chrome 32). Prefiero <a href="javascript:location.reload();"> </a>
Gabriel

3
Estoy usando Google Chrome 36.0.1985 y javascript: window.location.href = window.location.href funciona. location.reload () tiene el desafortunado efecto de preguntar al usuario si desea actualizar la página en Firefox y, dependiendo del escenario, puede no proporcionar el resultado deseado. Ver stackoverflow.com/questions/2405117/… para más discusión.
Simon Molloy

1
Estoy usando angular con enrutamiento. Esto no funcionó para mí. Sin embargo, esto funciona -> <a href="javascript:"> click me </a>
John Henckel

¿Qué pasa si js está deshabilitado?

55
Esta solución no conserva los anclajes
thomas.winckell

77

Una forma de usar JavaScript:

<a href="javascript:window.location.reload(true)">Reload</a>

44
Conserva cadenas de consulta y anclas ( ?query=string#anchor). ¡Excelente!
analog-nico

Terminé usando esta respuesta porque la posición de desplazamiento también se conserva. Útil si está utilizando una recarga como un pseudo botón "deshacer".
igneosaur

Esta solución FUNCIONA en React client
Andrius

¿podría explicar cómo usar esto en la sintaxis html?
Joanna Mikalai

Tengo una pregunta, ¿es truerealmente el parámetro con el que debe ir para este problema cuando usa el window.location.reloadmétodo? Eso hará que la actualización sea dura y evite extraer del caché, que puede ser lo que desee en algunas circunstancias, pero creo que en la mayoría de las situaciones le gustaría aprovechar el caché, ¿no es así?
Stephen M Irving

31

Podrías hacer esto: <a href="">This page</a>

pero no creo que conserve los datos GET y POST.


3
Desafortunadamente, no funciona en IE. De: msdn.microsoft.com/en-us/library/cc848861%28v=vs.85%29.aspx: si HREF se especifica como un valor en blanco (href = "" o href =), la ejecución del enlace puede mostrar el directorio que contiene el documento actual, o podría generar un error, dependiendo de otros elementos en el documento y el entorno del servidor.
Bohdan Lyzanets

12
<a href="<?php echo $_SERVER["REQUEST_URI"]; ?>">Click me</a>

12
No estoy usando PHP.
Tyilo

3
Noté el -1, puede que no sea la solución en su caso (porque es una solución de php) pero creo que es la solución más limpia aquí. Esto debido a que le da un valor válido al atributo href, es el más limpio. Si es posible, evite javascript. Entonces +1.
rofavadeka

Ty muy útil. ¿Por qué esto está bajando los pulgares? La pregunta original tampoco menciona js y la mayoría de los q aquí hacen referencia a JS ...
Andrew

@ Andrew la pregunta original está etiquetada con #html y #hyperlink. Si bien es cierto que "un enlace normal que apunta a la ubicación actual" es una descripción increíblemente vaga, estoy bastante seguro de que puede interpretarse razonablemente como la búsqueda de una solución exclusiva para el cliente. Un ancla donde el href está poblado por PHP no es un "enlace normal" de ninguna manera, es un código PHP.
endémico

@endemic Sugerir javascript es "normal" y php no es una opinión inútil. El OP en realidad define normal como no incluir javascript y no usar una ruta absoluta. Curiosamente, la mayoría de las respuestas están en javascript.
Andrew

10

use esto para recargar / actualizar la página actual

<a href="#" onclick="window.location.reload(true);">

o usar

<a href="">refresh</a>

9
<a href=".">refresh current page</a>

o si quieres pasar parámetros:

<a href=".?curreny='usd'">refresh current page</a>

7

<a href="https://stackoverflow.com/">Clicking me refreshes the page</a>

<a href="?">Click Me To Reload the page</a>


3
esto solo funciona si estás en index.html u otro documento raíz / url
Stephen

@Stephen por supuesto. Tienes toda la razón. Aparentemente estoy más oxidado de lo que pensaba. Simplemente lo probé muy rápido y resultó estar en la raíz.
Thomas Shields

Funciona muy bien cuando url es, por ejemplo. / blablabla mientras. me traería de vuelta a la raíz.
Augustin Riedinger

6

Desafortunadamente, no existe una forma global de hacerlo con solo HTML. Puede intentar hacerlo, <a href="">test</a>sin embargo, solo funciona en algunos navegadores.


No funciona en IE. De: msdn.microsoft.com/en-us/library/cc848861%28v=vs.85%29.aspx: si HREF se especifica como un valor en blanco (href = "" o href =), la ejecución del enlace puede mostrar el directorio que contiene el documento actual, o podría generar un error, dependiendo de otros elementos en el documento y el entorno del servidor.
Bohdan Lyzanets

1
Probé y funciona en todos los principales navegadores modernos (Chrome, Firefox, Edge, Opera, Safari)
Donald Duck

5

URL totalmente idempotente que conserva la ruta, los parámetros y el ancla.

 <a href="javascript:"> click me </a>

solo usa un poquito de JS.

EDITAR: esto no vuelve a cargar la página. Es un enlace que no hace nada.


@FranciscoCorralesMorales, lo siento pero creo que entendí mal la pregunta. Pensé que el OP estaba tratando de hacer un enlace que no hace nada. Pero ahora veo que el OP quiere un enlace que vuelva a cargar la página actual. (Lo editaré).
John Henckel

Gracias por este fragmento de código, que puede proporcionar ayuda inmediata. Una explicación adecuada mejoraría en gran medida su valor educativo al mostrar por qué esta es una buena solución al problema, y ​​la haría más útil para futuros lectores con preguntas similares, pero no idénticas. Por favor, editar su respuesta para agregar explicación y dar una indicación de lo que se aplican limitaciones y supuestos.
Toby Speight


2

Si bien la respuesta aceptada no funcionó para mí en IE9, esto sí:

<a href="?">link</a>

1
No creo que esto funcione si está interesado en preservar los parámetros de la cadena de consulta.
WynandB

1
@WynandB es correcto. esto eliminará todos los parámetros GET y POST. si eso es lo que quieres, o si no te importa, este truco funciona muy bien.
hanshenrik

2

Una solución mas

<a href="javascript:history.go(0)">Reload</a>

¡Buena solución! Una pequeña sugerencia para ese método es 0 es el parámetro predeterminado, por lo que si está intentando recargar, simplemente podría escribir: history.go()sin argumento.
Stephen M Irving

2
<a href="">Refresh!</a>

Deje el href=""espacio en blanco y actualizará la página.
También funciona si se pasa alguna información mediante formularios.


0

Uso JS para mostrar solo el div con una identificación específica en la página de etiquetas en un sitio jekyll. Con un conjunto de enlaces en la misma página, muestra el elemento correspondiente:

function hide_others() {
    $('div.item').hide();
    selected = location.hash.slice(1);
    if (selected) {
        $('#' + selected).show();
    }
    else {
    $('div.item').show();
    }
}

los enlaces usan enlaces como:

<a href="javascript:window.location.href='/tags.html#{{ tag[0] }}-ref'; hide_others()">{{ tag[0] }}</a>

0

Puede usar un formulario para hacer una POST a la misma URL.

 <form  method="POST" name="refresh" id="refresh">
 <input type="submit" value="Refresh" />
 </form>

Esto le proporciona un botón que actualiza la página actual. Es un poco molesto porque si el usuario presiona el botón de actualización del navegador, recibirá un do you want to resubmit the formmensaje.


0

Estoy usando HTML para resolver este problema
Uso:

<a href="page1.html"> Link </a>

* page1.html -> escriba el nombre del archivo en el que está trabajando (su archivo HTML actual)


Por favor edita la publicación. No está claro qué lenguaje de programación está utilizando, cómo intentó implementar el código, etc.
Roee Anuar

He usado HTML para hacer esta tarea.
Ayush Kumar

-1
<a href="/">Same domain, just like refresh</a>

Parece funcionar solo si su sitio web es index.html, index.htm o index.php (cualquier página predeterminada).

Pero parece que .es lo mismo y más aceptado

<a href=".">Same domain, just like refresh, (more used)</a>

Ambos funcionan perfectamente en Chrome cuando el dominio es ambos http://yhttps://


-2

<a href="https://stackoverflow.com/home" target="_self">Reload the page</a>


El problema es si no conocemos la url ... target = "_ self" puede omitirse
Hafenkranich

-3

Si está utilizando plantillas php / smarty, podría hacer algo como esto:

<a href="{{$smarty.server.REQUEST_URI}}{if $smarty.server.REQUEST_URI|strstr:"?"}&{else}?{/if}newItem=1">Add New Item</a>

-4

Simplemente agregue target = "_ blank" y el enlace abrirá una nueva página manteniendo la página original.


Como usted dice, esto solo abrirá cualquier página especificada en el hrefatributo en una nueva ventana / pestaña. Esto de ninguna manera responde a la pregunta real.
Philip Stratford
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.