Diferencia entre la ventana.ubicación.href y ventana.ubicación.Reemplazar en JavaScript | Explicado

Ambos atributos pertenecen al objeto de la ventana del navegador. Para ser precisos, pertenecen a un objeto interno conocido como el ubicación objeto, y su único trabajo es conocer la ubicación actual del documento. Cambiando estos ubicación Los valores de los objetos generalmente significan cambiar el documento. Porque este objeto define la URL, y cualquier cambio en la URL significa cambiar el documento para otro. Ahora el href propiedad y el reemplazar() La función hace exactamente el mismo trabajo pero de manera diferente.

Rompamos la confusión. Ambas propiedades se utilizan para ir a un nuevo documento o una nueva página web. Sin embargo, el "href " La propiedad lo hace agregando una nueva entrada dentro del elemento del historial y el "reemplazar" propiedad es por reemplazo la entrada más alta en el elemento de la historia con la URL más nueva.

La ventana.ubicación.propiedad href

En primer lugar, configure una nueva página de inicio con la siguiente línea dentro:

Esta es la primera página

Ir a la segunda página

En este fragmento de código anterior, se ha creado un botón que se utilizará para ir a la segunda página utilizando la función Buttonclicked () Dentro del archivo de script.

Ejecutar este documento HTML proporciona la siguiente página en el navegador:

Después de eso, en el archivo de script o en el Etiqueta, use las siguientes líneas de código:

Este script reubicará el navegador al "segunda pagina.html ". Sin embargo, segunda página.HTML aún no existe. Entonces, crea la segunda página.html con las siguientes líneas dentro:

Esta es la segunda página

Nota: esta segunda página.HTML debe crearse en el mismo directorio que el hogar.html o la primera página.

Después de eso, ejecutar el archivo HTML principal y hacer clic en el botón producirá los siguientes resultados:

Está claro desde la salida que presionar el botón redirigirá el navegador a la segunda página, y luego presionar el botón Atrás en la ventana del navegador llevará el navegador de regreso a la página de inicio. Este es el funcionamiento de la ventana.ubicación.propiedad href.

La ventana.ubicación.reemplazar()

Al igual que en el ejemplo de la propiedad HREF, comience creando un nuevo archivo HTML llamado Inicio.html y agregue las siguientes líneas dentro de él:

Esta es la primera página

Vaya a la segunda página usando reemplazar

Después de eso, agregue las siguientes líneas en la etiqueta de script o en el archivo de script:

En el fragmento de código, observe que, a diferencia de la propiedad HREF, el reemplazo es en realidad una función que toma la nueva ubicación dentro de sus argumentos.

Después de eso, cree la segunda página.HTML Agregue las siguientes líneas dentro de él:

Esta es la segunda página

Pero el navegador no puede volver

Porque ha utilizado la propiedad Reemplazar

Después de eso, ejecutar esta casa.HTML mostrará el siguiente comportamiento del navegador:

Está claro desde el GIF anterior que la función de reemplazo reemplaza la entrada más alta en el historial del navegador, por lo tanto, el botón de retroceso del navegador está atenuado.

Conclusión

La propiedad href y la función reemplazar () son parte del objeto de ubicación de la ventana. El objeto principal de ambos es mover el navegador a una nueva página web que está definida por la URL. La propiedad href agrega un elemento en la historia del navegador. Mientras que la función Reemplazar () reemplaza la entrada más alta con la nueva ubicación, lo que hace que los navegadores no puedan volver a la página anterior.