Obtener referencia del documento en JavaScript
Este artículo presentará cómo obtener una referencia de documento mediante programación durante la ejecución de una página web utilizando eventos y funciones de JavaScript con diferentes ejemplos.
Referencia del documento
El referente es una propiedad DOM de solo lectura que devuelve la URL del documento vinculado con nuestra página web actual. Como hemos llegado a la página web actual, podemos hacer clic en un enlace o en cualquier botón para navegar.
Para obtener acceso a un sitio web o cualquier página web desde una aplicación del lado del cliente, debemos solicitar la URL o la ruta del documento. Es la ubicación de un sitio web en particular, una página web o un archivo cargado en un servidor.
Una cadena que los usuarios escriben en una búsqueda del navegador web para invocar y llamar a un sitio web específico es una URL del sitio web.
Por ejemplo, https://www.delftstack.com/ es la URL completa de DelftStack con protocolo de capa de aplicación (HTTP).
Sintaxis de propiedad:
document.referrer; // it will get us complete web URL with (HTTPS) like
// (https://www.delftstack.com/)
Supongamos que estamos desarrollando un sitio web o una página web. Y, en algunas circunstancias, necesitamos encontrar y usar la referencia del documento actual mediante programación durante el tiempo de ejecución del sitio web.
Podemos manejarlo usando JavaScript. Puede ser útil al mantener navegaciones hacia atrás personalizadas.
Obtener referencia del documento en JavaScript
En HTML, la propiedad de referencia DOM es de solo lectura y se usa dentro de la fuente de JavaScript para obtener la URL del documento HTML o la página web vinculada a la página web actual. El valor de retorno de esta propiedad puede ser una cadena vacía si el usuario accede directamente a la página a través del marcador.
Incluyendo el protocolo de capa de red (HTTPS), podemos obtener la URL completa utilizando la propiedad de referencia DOM.
Sintaxis básica:
let refURL = document.referrer
Código de ejemplo:
<!DOCTYPE html>
<html>
<body>
<h1>DelftStack learning</h1>
<h2>JavaScript get document referrer example</h2>
<p>We have arrived from this link : </p>
<p id="para"></p>
<script>
let refUrl = document.referrer // get referrer and storing in variable
document.getElementById("demo").innerHTML = refUrl; // assign value to paragraph
</script>
</body>
</html>
Explicación del código de ejemplo:
- En el código fuente HTML anterior, hemos utilizado la etiqueta del elemento de párrafo
<p></p>y le hemos asignado una ID a ese elemento. - Dentro de las etiquetas
<script></script>hemos declarado e inicializado la variablerefUrl. - Ahora, para obtener la URL del documento, hemos utilizado la propiedad
document.referrery hemos almacenado el valor de retorno en una variable. - Finalmente, con la ayuda del método
document.getElementById(), hemos mostrado la cadena de resultados en el párrafo. - Puede guardar la fuente anterior con una extensión
.htmly ver el resultado.