Cómo obtener la URL de la página web usando JavaScript
Echemos un vistazo a esto en este artículo.
¿Qué es una URL??
Url (Uniforme Locator de recursos) es una ruta que le permite acceder a una instancia de página web en particular. El navegador reconoce la ruta y muestra la página web requerida contra esa URL.
Antes de saltar a obtener la URL de una página web, necesitamos tener un conocimiento básico de un par de objetos como:
- objeto de ventana
- Objeto de ubicación
- objeto href
Tengamos una comprensión básica de cada uno de estos objetos.
Objeto de la ventana JavaScript
JavaScript usa el ventana.ubicación.href Para obtener la URL de la página. Aquí el objeto de la ventana es un objeto universal o global que es básicamente la ventana de un navegador y este objeto de ventana contiene todos los objetos, funciones y variables de JavaScript.
Objeto de ubicación de JavaScript
Ubicación El objeto contiene toda la información de la URL actual de la página web, se puede acceder fácilmente a este objeto utilizando el ventana. ubicación.
Objeto href javascript
El href es una propiedad que se puede usar para establecer o devolver la URL completa de la página web actual en la que estamos trabajando. Esta propiedad es accesible bajo el ventana.ubicación.href
Echemos un vistazo a todo el objeto y sus aplicaciones.
ventana.ubicación.Href explicó
En JavaScript, el Ubicación Object contiene información sobre la URL actual del documento, mientras que el Ventana La interfaz se utiliza para acceder a ella. Como resultado, puede recuperar el Ubicación objeto para el documento actual con Ventana.ubicación. luego utiliza la propiedad ubicación.href Para recuperar una cadena que contiene toda la URL.
La URL actual que se muestra en la barra de direcciones del navegador web se puede recuperar utilizando una variedad de técnicas de JavaScript. Puede recuperar estos datos utilizando el atributo de objeto de ubicación del objeto de la ventana. La siguiente es una lista de algunas de las características del objeto de ubicación.
Las operaciones que puede hacer usando JavaScript se enumeran a continuación.
Ejemplos de datos de URL recuperados con la ventana.ubicación
Tomemos un ejemplo de url 'https: // exp.com: 3737/Get?post = exp#query 'y realizar algunas operaciones en él.
| Operación | Resultados |
|---|---|
| ventana.ubicación.href | https: // exp.com: 3737/Get?post = exp#consulta |
| ventana.ubicación.protocolo; | https: |
| ventana.ubicación.anfitrión | ejemplo.com: 3737 |
| ventana.ubicación.nombre de host | Exp.comunicarse |
| ventana.ubicación.puerto | 3737 |
| ventana.ubicación.nombre de ruta | conseguir |
| ventana.ubicación.consulta | ?post = exp |
Implementación del navegador
Hemos discutido anteriormente cómo podemos usar fácilmente algunos de los objetos JavaScript incorporados para recuperar la URL y la información que se encuentra bajo la URL como el nombre de host, el nombre de la ruta, la consulta, etc. Ahora, vamos a probar prácticamente cómo el ventana.ubicación.href La propiedad funciona y cómo podemos usarla para obtener la URL de la página web con bastante facilidad.
JavaScript le permite obtener la URL de una página web utilizando su ventana.ubicación propiedad. Simplemente puedes llamar al ventana.ubicación.href Propiedad que le devolverá la URL completa de la página web que incluye Name de host, PathName y String de consulta.
Probemos la propiedad de JavaScript prácticamente.
Aquí en el código anterior, hemos creado un botón, este botón tiene un evento JavaScript conectado a él que se activa cada vez que el usuario hace clic en un botón. En el evento de JavaScript, estamos mostrando la URL de la página web actual en una alerta utilizando el ventana.ubicación.href, Esta alerta contiene el mensaje y la URL actual de la página web.
Salida del navegador:
Cuando hacemos clic en el botón, aparece una alerta que muestra la URL de la página web actual:
Aquí puedes ver que hemos usado ventana.ubicación.href Dentro del código para obtener la URL de la página web y devolverla al navegador como alerta. Entonces, siempre que haga clic en el botón "Haga clic en mí", verá una alerta en la pantalla con el mensaje que contiene la URL de la página web actual.
Recuperar datos de URL usando jQuery
Hasta ahora hemos discutido cómo podemos obtener fácilmente la URL de la página web utilizando el JavaScript's ventana.ubicación.href Propiedad, también podemos lograr la misma funcionalidad con la jQuery, que es fácil de implementar y bastante confiable, así como.
Las operaciones que puede hacer usando jQuery se enumeran a continuación.
Tomemos un ejemplo de url 'https: // exp.com: 3737/Get?post = exp#query 'y realizar algunas operaciones jQuery en él.
| Operación | Resultados |
|---|---|
| $ (ubicación).attr ('href'); | https: // exp.com: 3737/Get?post = exp#consulta |
| $ (ubicación).attr ('protocolo'); | https: |
| $ (ubicación).attr ('host'); | ejemplo.com: 3737 |
| $ (ubicación).attr ('hostname'); | Exp.comunicarse |
| $ (ubicación).attr ('puerto'); | 3737 |
| $ (ubicación).attr ('rathName'); | conseguir |
| $ (ubicación).attr ('búsqueda'); | ?post = exp |
| $ (ubicación).attr ('hash'); | #consulta |
| $ (ubicación).attr ('origen'); |
Conclusión:
En JavaScript, ventana.ubicación.href es la propiedad que puede usar para recuperar la URL de la página web actual. Puede obtener fácilmente la URL de la página actual y realizar cualquier operación que desee después de tomar la URL. En este artículo, hemos visto algunas operaciones que podemos realizar en la URL después de tomarla y también echamos un vistazo a cómo podemos implementar el método dentro de nuestro código JavaScript para lograr la funcionalidad.