Hacer que un iframe se ajuste a la altura de una ventana con Javascript

En el siguiente tutorial iremos a definir de manera dinámica  el tamaño de un iframe para que se ajustar el marco al espacio disponible en la ventana del navegador, con javascript.

Tengo una página que tiene un iframe y quiero que ocupe el espacio máximo disponible, pero no dispongo de toda la página, porque hay otros contenidos en la página. Además, como a veces la ventana del navegador es más grande o más pequeña, el espacio que puedo asignar al iframe es distinto. 

En este taller de Javascript vamos a realizar un cálculo del espacio disponible en la página para que un iframe que tenemos dentro ocupe la mayor área posible. Todo teniendo en cuenta que cada usuario puede entrar con una definición de pantalla distinta y con un navegador distinto. 

Nota: Recordamos que un iframe es un frame que se puede insertar en el cuerpo de una página, asignando una altura y una anchura. Podemos ver una explicación detallada enhttp://www.desarrolloweb.com/articulos/667.php

Antes que nada me gustaría que se entendiese bien el problema con el que me encuentro, al no saber qué área hay disponible en la página para cada usuario que nos visita. 

Veamos esta imagen, que nos puede aclarar rápidamente el caso en el que nos encontramos. 

Imaginemos una definición de 800 x 600. Entonces el espacio para el iframe será el tamaño útil donde se visualiza la página, menos el espacio reservado para la cabecera. Ahora, por ejemplo en una definición de 1280 x768, como el espacio útil para la página es mayor, el espacio en el que quiero que se vea mi iframe también será mayor. Sigue siendo el tamaño útil donde se visualiza la página, menos el espacio reservado para la cabecera, pero como ahora el espacio útil es mayor, el iframe también tiene que presentarse con mayor tamaño. 

La solución pasa por utilizar un Javascript para calcular el espacio útil de la página y restarle el espacio de la cabecera. Entonces tendremos la dimensión altura que tiene que tener el iframe. 

Para calcular este dato tenemos que tener en cuenta que Internet Explorer y Firefox tienen modos distintos. Es decir, la propiedad espacio útil de la página es distinta en estos dos browser, por lo que el script se puede complicar un poco. 

En Internet Explorer: el espacio útil se calcula con la propiedad document.body.clientHeight. 

En Mozilla Firefox: el espacio útil nos lo devuelve la propiedad window.innerHeight 

Con este script podemos calcular el tamaño que debemos reservarle al iframe: 

if (window.innerHeight){ 
   //navegadores basados en mozilla 
   espacio_iframe = window.innerHeight - 110 
}else{ 
   if (document.body.clientHeight){ 
      //Navegadores basados en IExplorer, es que no tengo innerheight 
       espacio_iframe = document.body.clientHeight - 110 
   }else{ 
       //otros navegadores 
       espacio_iframe = 478 
   } 
}

El primer if sirve para los navegadores Firefox, Netscape y similares, que entienden la propiedad window.innerHeight 

El segundo if es para IExplorer que conoce document.body.clientHeight. 

En los dos casos tenemos que restarle 110, que es el espacio que ocupa la cabecera. El último if es por si acaso no entiende ninguna de las dos propiedades el javascript, para darle un valor por defecto. 

Luego, escribiríamos mediante javascript la etiqueta iframe con los datos obtenidos previamente: 

document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' + espacio_iframe + '">') 
document.write ('</iframe>')

¿Y qué pasaría si los navegadores no entienden Javascript, o está deshabilitado? 

En ese caso nos conviene utilizar la etiqueta noscript, para mostrar un iframe con los valores por defecto (noscript sólo se tiene en cuenta si no hay soporte para javascript): 

<noscript> 
<iframe frameborder="0" src="mipagina.html" width="770" height=478> 
</iframe> 
</noscript>

El código completo sería el siguiente: 

<script> 
if (window.innerHeight){ 
   //navegadores basados en mozilla 
   espacio_iframe = window.innerHeight - 110 
}else{ 
   if (document.body.clientHeight){ 
       //Navegadores basados en IExplorer, es que no tengo innerheight 
       espacio_iframe = document.body.clientHeight - 110 
   }else{ 
       //otros navegadores 
       espacio_iframe = 478 
   } 
} 
document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' + espacio_iframe + '">') 
document.write ('</iframe>') 
</script> 
<noscript> 
<iframe frameborder="0" src="mipagina.html" width="770" height=478> 
</iframe> 
</noscript>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Logra evitar que la página se muestre en un frame con Javascript

 Un sencillo javascript para evitar que nuestra página se muestre dentro de un frame y se muestre en todo el espacio de la ventana.

Existe una utilidad bastante sencilla sobre el control de frames en Javascript la cual también resulta muy útil para cualquier sitio web. Se trata de evitar que nuestra página se muestre dentro de cualquier división de frames y puede ser muy interesante para evitar que un enlace de cualquier sitio web introduzca nuestra página dentro de su diseño o estructura de menús. 

Puede que aparecer dentro de un frame en muchos casos no nos importe demasiado, pero reducen el espacio para mostrar nuestra propia página y la encorsetan en un diseño que no tiene porque hacerle ningún bien. 

El script 

Tan solo una línea de código es suficiente para crear este efecto. Esta línea se puede poner en cualquier parte del documento HTML, aunque sería recomendable que quedase por la parte superior o dentro de la cabecera, para que tenga que cargarse la página entera para expandirse a todo el espacio de la ventana. 

<script language="JavaScript"> 
<!--// evito que se cargue en otro frame 
if (top.location != self.location)top.location = self.location; 
//--> 
</script>

En este script se comprueba si las propiedades top.location, que hace referencia a la URL de la declaración de frames, en caso de que hubiera y self.location, que hace referencia a la URL del documento donde está el script. 

Si las dos URLs son iguales significaría que la página no está cargada dentro de un frame y si son distintas querría decir que sí esta mostrándose en el espacio de un marco. 

En caso de que sean distintas, simplemente se indica que en la ventana del navegador al completo (top.location) se muestre la URL de la página donde está el script (self.location). 

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Ejemplo de acceso a variables y funciones del frame

Ilustramos el trabajo con variables y funciones de otros frames para conseguir memorizar valores de variables de una página a otra.

 En el siguiente tutorial mostraremos un ejercicio que nos podría ilustrar la utilidad relatada en este tuto. Se trata de una especie de test de personalidad. Las funcionalidades de dicho test para el momento no son muy importantes que digamos, lo que sí nos importa es que, llegados al final del test, recordemos las respuestas que ha ido seleccionando el visitante. 

Es así como el ejercicio va a consistir en varias preguntas, realizadas en páginas independientes. Al final, en una página de resultados, se mostrará la respuesta de cada una de las preguntas. 

Podemos ver el ejercicio en marcha en una página aparte. 

La declaración de frames que hemos podido ver anteriormente es la que emplearemos para este ejercicio. Está preparada para guardar todas las respuestas, por ello tiene un array llamado respuestas al cual se accederá desde cada una de las páginas,bien sea para introducir la respuesta seleccionada o para extraer el valor de las distintas respuestas, que se deben mostrar en la página de resultados. 

La función extraeValor() accede a una lista de radiobutons que habrá en cada una de las preguntas y devuelve el value del radiobuton seleccionado, o cero en caso de que no se haya seleccionado ningún radiobutton. Esta función la hemos colocado en la declaración de frames por dos razones:

1. Para ilustrar un poco más el método de acceder a funciones de otros frames.
2. También para evitar que tengamos que escribir la función en el código de todas las páginas de las preguntas. (También hubiese sido una buena idea incluir esa función como un archivo externo .js, aunque esta solución no nos serviría para incluir el array de respuestas, porque no se podrían memorizar los resultados)

Ahora estaría bien observar el código de cada una de las preguntas. Es muy parecido para cada pregunta. 

<html> 
<head> 
    <title>Pregunta 1</title> 

<script> 
function responder(){ 
    var valor = window.parent.extraeValor() 
    if (valor==0) 
       alert ("Debe elegir una respuesta") 
    else{ 
       window.parent.respuestas[0] = valor 
       window.location = "pregunta2.html" 
    }
} 
</script> 
</head> 

<body bgcolor=ff8833> 
<h2>Pregunta 1: ¿Te gusta hacer regalos?</h2> 
<form name=f1> 
<input type=radio value="No, sólo los hago en situaciones especiales" name="respuesta"> No, sólo los hago en situaciones especiales 
<br> 
<input type=radio value="Si, me encanta" name="respuesta"> Si, me encanta 
<br> 
<input type=radio value="No y además nunca regalo nada" name="respuesta"> No y además nunca regalo nada 
<br> 
<input type="button" value="Responder" onClick="responder()"> 
</form> 

</body> 
</html>

En el código se muestra un formulario con una lista de radiobuttons con las respuestas posibles. También un botón para responder, que llama a una función que será la encargada de apuntar en la variable respuestas la respuesta actual. 

La función extrae el value de la opción seleccionada en el formulario y evalua:

• Si es 0, en caso de que no se haya seleccionado respuesta alguna, advierte al usuario que debe seleccionar uno de los radiobuttons.
• Si es distinto de 0, es que se ha seleccionado respuesta. Entonces, para memorizarla, la guarda en la variable de la declaración de frames y luego pasa a la pregunta siguiente.

Se realizan varias preguntas hasta que se llega a la página de resultados, que muestra las respuestas. Dicha página tendría esta forma: 

<html> 
<head> 
    <title>Resultados de la encuesta</title> 
</head> 

<body bgcolor=ff8833> 
<h2>Resultado</h2> 
<br> 
<b>Has respondido lo siguiente:</b> 
<br> 
<br> 

<b>Pregunta 1</b>: <script>document.write(window.parent.respuestas[0])</script> 
<br> 
<b>Pregunta 2</b>: <script>document.write(window.parent.respuestas[1])</script> 
<br> 
<b>Pregunta 3</b>: <script>document.write(window.parent.respuestas[2])</script> 

</body> 
</html>

En el ejemplo no se evaluan los resultados para saber cuantas respuestas se acertaron ni para obtener conclusiones del encuestado. Lo único que se hace es mostrar la respuesta almacenada en cada una de las preguntas. Para ello se imprime el contenido del array de respuestas en cada una de sus casillas. 

Con esto creo que queda más o menos resuelto el ejemplo e ilustrado el trabajo con frames. Sería interesante echar un vistazo al ejercicio en marcha para obtener más concusiones.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende cómo crear variables o funciones globales a todos los frames

Podemos hacer que una variable o una función sea accesible desde cualquier página de un sitio web hecho con frames.

Al lograr acceder a funciones y variables de otros frames se nos ocurre otro uso que bien puede resultarnos  interesante. Esta consiste en crear variables y funciones globales a todo un sistema de frames que además tendrían como peculiaridad que se podrían recordar durante toda la vida del frame y desde distintas páginas. 

Es decir, podemos conseguir que una variable tenga validez en diversas páginas y que  a su vez conserve el valor al saltar de una página a otra. Así, cuando se accede a una página, podríamos incluir un valor y accederlo desde cualquier otra página del web. Es algo así como el paso de variables de una página a otra de la programación de servidor, pero realizado con el cliente y con la ayuda de un frame. 

Nota: El tema de pasar variables de una página a otra es interesante para usuarios bastante avanzados. Si llegamos a aprender a hacer páginas web complicadas veremos como más tarde o temprano nos veremos en necesidad de que las páginas de nuestro sitio web se pasen o envíen variables con sus correspondientes valores. Esto es algo que hacen muy fácil los lenguajes de programación de servidor como ASP o PHP, pero que en lenguajes del lado del cliente como Javascript no es posible o bien hay que inventarse algún mecanismo de cosecha propia para conseguirlo.

Para crear variables que tengan validez en todas las páginas que se muestren en una estructura de frames debemos declararlas en el archivo HTML que contiene la declaración de frames (donde están las etiquetas <frameset> y similares). 

Asimismo, si queremos declarar funciones a las que también poder llamar desde cualquier página del frame, deberíamos declararlas en la declaración de frames. 

En esta declaración de frames, que utilizaremos luego en un ejemplo de esta técnica, declara una variable, en este caso de tipo array, y una función. No tiene mucho sentido en principio declarar estas estructuras en una declaración de frames, pues no las vamos a poder utilizar, salvo que las accedamos desde otros frames del sitio web. 

<html> 
<head> 
<title>Ejemplos de control de frames</title> 
<script language="JavaScript"> 
var respuestas = new Array(3) 

function extraeValor(){ 
    for (i=0;i<window.frames[1].document.f1.respuesta.length;i++){ 
    if (window.frames[1].document.f1.respuesta[i].checked) 
       return window.frames[1].document.f1.respuesta[i].value 
    } 
    return 0 
} 

</script> 
</head> 
<frameset rows="60,*"> 
    <frame src="frames1.html" name="frame0" marginwidth="10" marginheight="10"> 
    <frame src="pregunta1.html" name="frame1" marginwidth="10" marginheight="10"> 
</frameset> 
</html>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

Acceso a variables y funciones de otros frames

Cómo se puede acceder a una variable o llamar una función que esté contenida en otro frame.

De manera similar a como se hace para las ventanas secundarias, también podemos acceder a las variables y funciones de las páginas que hay en otros frames. 

Referencia: El tema de ventanas secundarias está tratado en un manual independiente: Control de ventanas secundarias con Javascript.

Al igual que para las ventanas secundarias, cuando se construye una variable en un frame podemos acceder a ella como si fuese una propiedad del objeto window (o frame en este caso). A una función accederemos como si fuera un método de la ventana (o frame en este caso). 

Por ejemplo, si en el ejemplo anterior quisiésemos colocar en el frame de la izquierda o en el del medio una llamada a la función cambiaColor() del frame derecho lo haríamos así. 

window.parent.frames[2].cambiaColor() 

Si en el mismo frame donde se ha definido la función cambiaColor() hubiese una variable global llamada mivariable, para acceder a ella desde otro frame lo haríamos así: 

window.parent.frames[2].mivariable = “lo que sea” 

De esta manera podemos utilizar variables o funciones contenidas en otros frames, lo que nos puede abrir muchas posibilidades interesantes para realizar sistemas interactivos en páginas web, como veremos más adelante.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Ejemplo de control de frames con Javascript

Seguimos realizando ejemplos de acceso desde un frame a otros mediante Javascript.

Vamos a ver otro ejemplo de control de frames con javascript, también muy sencillo, pero donde vamos a profundizar en el acceso a otro tipo elementos dentro de un frame, como pueden ser los formularios. 

Este ejemplo va a consistir en tres frames, dispuestos en columnas. En el frame de la izquierda habrá una caja de selección desplegable con varios colores, en el frame del medio otra caja con los frames del documento y en la de la derecha un botón para cambiar el al color seleccionado el fondo del frame seleccionado. 

Esperemos que se entienda mejor al ver el ejemplo en funcionamiento. 

Veamos parcialmente los códigos de las páginas. El frame de la izquierda tendría el formulario para poner los colores. 

<form> 

<select name="color"> 

<option value="red">Rojo 

<option value="green">Verde 

<option value="Blue">Azul 

</select> 

</form>

El frame del medio tendría un formulario muy parecido, en este caso para colocar el frame donde deseamos actualizar el color. 

<form> 

<select name="marcos"> 

<option value="0">Izquierda 

<option value="1">Medio 

<option value="2">Derecha 

</select> 

</form>

Por último veremos la función, que estaría situada en el frame de la derecha, que se pondrá en funcionamiento al pulsar el botón. 

function cambiarColor(){ 

    colorin = parent.frames[0].document.forms[0].color.options[parent.frames[0].document.forms[0].color.selectedIndex].value

    idFrame = parent.frames[1].document.forms[0].marcos.options[parent.frames[1].document.forms[0].marcos.selectedIndex].value

    window.parent.frames[idFrame].document.bgColor = colorin 

}

En la función accedemos primero al frame 0 para conseguir el color. Para ello accedemos al formulario donde está el campo select. La nomenclatura puede resultar un poco liosa, pero simplemente estamos accediendo al objeto select para recuperar el valor seleccionado. Las líneas salen tan largas porque recorremos muchos objetos de la jerarquía para llegar a los datos de los objetos que necesitamos. 

Accedemos de manera similar al frame 1, para recuperar el color de fondo, navegando por la jerarquía hasta llegar al campo select y extraer su valor. 

Por último ejecutamos la sentencia de cambio al color de fondo elegido sobre el frame seleccionado. Para ello accedemos al vector de frames con el índice rescatado en el formulario del frame del medio. Además colocamos en la propiedad bgColor de su document el valor del color seleccionado. 

Se puede ver el ejemplo en una página aparte. 

Simplificar la función anterior 

Este inciso es con objetivo de profundizar un poco en el manejo de objetos con Javascript, aunque no tiene que ver con el tema de frames, puede ser interesante. 

La función anterior tiene unas referencias repetitivas sobre objetos que es muy largo referenciar a través de la jerarquía. Podemos guardar en una variable una de esas referencias tan largas para acceder a ella simplemente con el nombre de la variable. 

De este modo, nosotros podemos guardar una referencia al campo select del formulario. Así: 

campoColor = parent.frames[0].document.forms[0].color

La variable campoColor es lo mismo que acceder por toda la jerarquía hasta el campo select del color. Luego podríamos acceder a una de sus propiedades de manera más corta, por ejemplo a la propiedad selectedIndex, así. 

campoColor.selectedIndex

Con estos datos podremos entender este segundo código propuesto para la función anterior 

function cambiarColor(){ 

    campoColor = parent.frames[0].document.forms[0].color 

    colorin = campoColor.options[campoColor.selectedIndex].value 

    campoFrame = parent.frames[1].document.forms[0].marcos 

    idFrame = campoFrame.options[campoFrame.selectedIndex].value 

    window.parent.frames[idFrame].document.bgColor = colorin 

}

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información