Resumen: Entrega nº72 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01172E

 

 

WINDOW.HISTORY

Dentro de la jerarquía de objetos JavaScript existe un objeto denominado history, que es una propiedad de window. A su vez, se dice que existen objetos de tipo History, siendo el objeto window.history un ejemplo de este tipo de objetos. Con este objeto podemos trabajar con el historial de navegación del usuario y retroceder a una página anterior o avanzar páginas visitadas.

logo javascript

 

Recordemos que de forma aproximada puede representarse la jerarquía de objetos JavaScript de la siguiente manera.

jerarquia objetos javascript

 

 

PROPIEDAD - OBJETO WINDOW.HISTORY

La propiedad window.history devuelve un objeto de tipo History con información relacionada con las URLs visitadas por el usuario en la pestaña actual.

Por motivos de seguridad, window.history no almacena información sobre las url´s concretas accedidas por el usuario, aunque permite moverse hacia delante y hacia detrás en las urls visitadas usando métodos específicos para ello.

Vamos a citar aquí algunas de las propiedades de los objetos History. Tener en cuenta que algunas de ellas no son soportadas por algunos navegadores:

PROPIEDAD

UTILIDAD

EJEMPLOS aprenderaprogramar.com

length

Devuelve un entero que representa el número de elementos (urls) visitados para esa pestaña y sesión por el usuario. Si sólo se ha visitado la url actual devuelve 1.

alert ('Valor window.history.length es: '+ window.history.length);

//Devuelve un entero, por ejemplo 4 si se han visitado 4 direcciones web (3 más la actual).

state

Un objeto asociado a la url actual, que almacena propiedades informativas de situaciones que existían durante la navegación y que deben establecerse a través de código de programación. Su fin es poder “recordar” situaciones que existían durante la navegación.

alert ('Valor window.history.state es: '+ window.history.state);

// Por defecto null

 

 

La propiedad state nos permitiría por ejemplo almacenar un valor que hubiera elegido un usuario de un formulario y que no se encuentra en la url pero podemos considerar como asociado a la historia de navegación.

Vamos a citar aquí algunos de los métodos de los objetos History. Tener en cuenta que algunas de ellas no son soportadas por algunos navegadores:

MÉTODO

UTILIDAD

EJEMPLOS aprenderaprogramar.com

back()

Carga la anterior url visitada en esa pestaña de navegación por el usuario. Equivale a que el usuario pulsara el botón back del navegador.

window.history.back();                    

//Carga la anterior url en la historia de navegación

forward()

Carga la siguiente url almacenada en el historial de navegación del usuario para esa pestaña.

window.history.forward();

//Carga la siguiente url en la historia de navegación

go (numeroUrls)

Permite avanzar numeroUrls hacia delante o hacia detrás (con números negativos). Así history.go(-1) equivale a history.back()

window.history.go(-2);

//Salta atrás dos urls en la historia de navegación

Otros métodos

Otros métodos como history.pushState y history.replaceState() permiten añadir o modificar entradas de la historia de navegación del usuario.

No vamos a presentar ejemplos de estos métodos

 

 

Recordar que en el contexto global window.history.back() es equivalente a history.back(). No obstante, si queremos dejar patente nuestra intención de referirnos a window podemos escribirlo si así lo preferimos.

Escribe este código y comprueba su funcionamiento:

<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

 window.onload = function () {

var adelante = document.getElementById('irAdelante');

adelante.addEventListener("click", irAdelante);

var atras = document.getElementById('irAtras');

atras.addEventListener("click", irAtras);

function irAdelante() { this.style.color = 'orange'; window.history.forward();}

function irAtras() { this.style.color = 'red'; window.history.back();}

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; margin:20px;" id ="irAdelante">Ir adelante</div>

<div style="color:blue; margin:20px;" id ="irAtras">Ir atras </div>

<a href="http://aprenderaprogramar.com">Pulsa para generar un avance y poder volver atrás con back</a>

</body>

</html>

 

 

Para comprobar el funcionamiento, accede a una página web, por ejemplo clarin.com, luego carga la url correspondiente al archivo html y pulsa “Ir atrás”. Al pulsar, el navegador volverá a clarin.com. Si pulsas en el enlace “Pulsa para generar un avance…”, luego pulsas el botón back del navegador y luego pulsas sobre “Ir adelante”, el navegador cargará la web aprenderaprogramar.com porque es la que se encuentra delante en el historial de navegación.

 

 

EVENTO ONPOPSTATE

Existe un evento denominado onpopstate que se dispara cuando se produce un cambio de url (navegación, avance o retroceso) dentro del proceso de navegación del usuario.

 

 

PROPIEDAD - OBJETO WINDOW.SCREEN

La propiedad window.screen devuelve un objeto de tipo Screen con información relacionada con la pantalla donde el usuario está visualizando el documento HTML.

Vamos a citar aquí algunas de las propiedades de los objetos Screen. Tener en cuenta que algunas de ellas no son soportadas por algunos navegadores. Recordar que para ver los mensajes con la instrucción console.log hemos de tener abierta la consola del navegador.

PROPIEDAD

UTILIDAD

EJEMPLOS aprenderaprogramar.com

width

Devuelve el ancho de pantalla, en píxeles

console.log( 'Ancho de pantalla en px: '+window.screen.width);

// Por ejemplo 1280 px

height

Devuelve el alto de pantalla, en píxeles

console.log('Alto de pantalla en px: '+window.screen.height);

// Por ejemplo 800 px

availWidth

Devuelve el ancho de pantalla disponible para visualización, descontados elementos fijos como barras que resten espacio de visualización.

console.log('Ancho de pantalla efectivo en px: '+window.screen.availWidth);

// Por ejemplo 1280 px

availHeight

Devuelve el ancho de pantalla disponible para visualización, descontados elementos fijos como barras que resten espacio de visualización.

console.log('Alto de pantalla efectivo en px: '+window.screen.availHeight);

// Por ejemplo 770 px debido a la barra de tareas

Otras

colorDepth (calidad de color en bits), pixelDepth (cantidad de colores que puede representar un píxel), y otras propiedades experiementales como orientation.

No veremos ejemplos sobre otras propiedades

 

 

Los objetos Screen tienen algunos métodos pero su uso está vinculado a prefijos específicos de navegador o son tecnologías experimentales más propias de smartphones y de tablets que de desarrollos web habituales, por lo que no vamos a comentarlos aquí.

 

 

PROPIEDAD - OBJETO WINDOW.FRAMES

Si un documento HTML contiene frames ó iframes, el navegador crea un objeto window asociado al documento HTML principal, y tantos objetos window adicionales como frames o iframes existan.

La propiedad window.frames devuelve un objeto de tipo array-like con los objetos tipo window (frames ó iframes), que son subventanas de la ventana principal.

Para entender qué devuelve window.frames ejecuta este código donde se accede de forma tradicional:

<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

window.onload = function() {

iframe = document.getElementsByTagName( "iframe" );

  alert( "Tenemos: " + iframe[0].name + ', ' + iframe[1].name );

  }

function ejemplo() {

for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = "red";}

}

</script>

</head>

<body>

<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"> Probar </div>

<iframe name="aprende1" style="margin:20px; padding:20px;" src="http://aprendeaprogramar.es" width="350" height="600">

  <p>Tu navegador no admite iframes.</p>

</iframe>

<iframe name="aprende2" style="margin:20px; padding:20px;" src="http://aprenderaprogramar.com/foros" width="350" height="600">

  <p>Tu navegador no admite iframes.</p>

</iframe>

</body>

</html>

 

 

En teoría window.frames nos devolvería lo mismo que document.getElementsByTagName( "iframe" );, pero en la práctica el resultado de usar esta propiedad es irregular y está influido por parámetros (server side headers) que envía el servidor que sirve la página web dentro del frame o iframe que pueden dar lugar a restricciones.

Si pruebas a hacer el cambio en el código anterior: iframe = window.frames;

Al intentar ejecutarlo obtendrás un mensaje de error por consola (por ejemplo Error: Permission denied to access property 'name', Error: Permission denied to access property 'style'). Sin embargo si en lugar de intentar modificar el estilo intentas modificar la propiedad location, por ejemplo iframe[i].location = "http://aprenderaprogramar.com"; no obtendrás este error.

 

 

EJERCICIO

Crea una página web que muestre en el lado izquierdo tres opciones donde podrá pulsar el usuario: clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario (por ejemplo si el usuario pulsa en elmercurio.cl en el frame que se encuentra debajo deberá mostrarse la web de elmercurio.cl). En el lado derecho estarán las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte inferior derecha, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: