Cargando



HTML5 – Objeto Location

En este tutorial vamos a desglosar las características del objeto location, además veremos algunos ejemplos prácticos de como interactuar con él mediante el lenguaje JavaScript.


nov 13 2013 21:20
Profesional
nov 14 2013 16:36
El objeto location es uno de los tantos a los que podemos acceder gracias al DOM, este nos permite obtener información relevante sobre la dirección del documento y también permite habilitar la navegación hacia otros documentos.

El objeto location

Como mencionamos al inicio, el objeto location nos permite acceder a la propiedades de locación de nuestro documento a través del DOM, de forma que podemos obtener información detallada sobre las direcciones y como navegar a otros documentos.

Para obtener todo esto, contamos con las siguientes propiedades y métodos que podemos utilizar al llamar a este objeto, veamos el listado y que hace cada una:

· protocol: Obtiene o establece el componente protocolo de la URL del documento.

· host: Obtiene o establece el componente host de la URL del documento.

· href : Obtiene o establece la locación del documento actual.

· hostname: Obtiene o establece el nombre de host de la URL del documento.

· port: Obtiene o establece el componente del puerto de la URL del documento.

· pathname: Obtiene o establece el componente path o ruta de la URL del documento.

· search: Obtiene o establece el componente de consultas de la URL del documento.

· hash : Obtiene o establece un componente hash para la URL del documento.

· assign(<URL>): Navega hacia la URL especificada.

· replace(<URL>): Remueve el documento actual y navega hacia el que fue especificado en la URL.

· reload(): Recarga o refresca el documento actual.

· resolveURL(<URL>): Resuelve la URL relativa especificada a una ruta absoluta.


Muy bien ahora que sabemos con que contamos vamos a ver un pequeño ejemplo de cómo obtener toda esta información en un documento utilizando Javascript dentro de nuestro documento HTML.

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
		 </head>
		 <body>
				 <script>
							 [b]document.writeln("<pre>");[/b]
[b]					 document.writeln("protocol:[/b]
[b]					 document.writeln("host: " +[/b]
[b]					 document.writeln("hostname:[/b]
[b]					 document.writeln("port: " +[/b]
[b]					 document.writeln("pathname:[/b]
[b]					 document.writeln("search: "[/b]
[b]					 document.writeln("hash: " +[/b]
[b]					 " + document.location.protocol);[/b]
[b]					 document.location.host);[/b]
					 [b]" + document.location.hostname);[/b]
[b]					 document.location.port);[/b]
[b]					 " + document.location.pathname);[/b]
[b]					 + document.location.search);[/b]
[b]					 document.location.hash);[/b]
[b]					 document.write("</pre>");[/b]
				 </script>
</body>
</html>

Veamos cómo se interpreta esto en el navegador; para poder demostrar la funcionalidad de search y de hash utilizamos ?query=apples#apples para que veamos como lo toma el navegador, a continuación el resultado en la siguiente imagen:


html5_location1.jpg


Utilizar el objeto location para navegar a otra página

Como habíamos mencionado anteriormente también podemos utilizar el objeto location para navegar a otro sitio, es decir, para ir a otro documento, hay varias formas de hacerlo, sin embargo vamos a ver una de las más sencillas en esta ocasión de manera demostrativa, primero veamos el código que debemos generar y luego explicaremos el funcionamiento:

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
		 </head>
		 <body>
				 <p>
							 There are lots of different kinds of fruit - there are over 500 varieties
							 of banana alone. By the time we add the countless types of apples, oranges,
							 and other well-known fruit, we are faced with thousands of choices.
				 </p>
				 <button id="pressme">Press Me</button>
				 <p>
							 One of the most interesting aspects of fruit is the variety available in
							 each country. I live near London, in an area which is known for
							 its apples.
				 </p>
				 <img id="banana" src="banana-small.png" alt="small banana"/>
				 <script>
							 [b]document.getElementById("pressme").onclick = function() {[/b]
[b]					 document.location.hash = "banana";[/b]
							 }
				 </script>
</body>
</html>

En este código simplemente hacemos lo siguiente, primero establecemos que en el elemento con el id pressme vamos a incluir una nueva función al momento que le haga click sobre él, esto gracias al evento onclick, luego dentro de la función que se activa al hacer click utilizamos el objeto document.location.hash y le igualamos el valor del hash al que vamos a navegar, en este caso banana es una imagen que hemos incluido como el id de un elemento img de imagen.

Veamos como se ve esto en nuestro navegador:



Como vemos es un comportamiento bastante útil y lo logramos de una forma muy sencilla utilizando el objeto location.

Otra forma podría ser utilizando el método replace de los que habíamos listado anteriormente, sin embargo la particularidad de replace es que sustituye el documento actual con el que recibe como parámetro eliminando así al documento que lo llamó del historial, por lo que el botón de atrás del navegador no reconduciría a ningún lado.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X