La propiedad length del Objeto Window() devuelve el número de frames que hay en una página web:
alert( "Esta página web tiene [" + window.length + "] frame(s)" );
Al acceder a un frameset podemos usar las propiedades rows y cols para redimensionarlo.
Lo haremos como se muestra en el siguiente ejemplo:
window.document.body.cols = "80%,*";
En páginas web que contienen frames podemos usar la propiedad frames del Objeto Window() para acceder a ellos y su contenido.
Para acceder a un frame< debemos indicar su índice o posición numérica (comienzan desde cero) o bien su nombre.
Por ejemplo, en una página web que contiene dos frames cuya propiedad name es 'frmIzquierdo' y 'frmDerecho' respectivamente, podríamos acceder a ellos de las siguientes tres formas:
alert( window.frames[0] );
alert( window.frames['frmDerecho'] );
alert( window.frames.frmDerecho );
En estos casos tendríamos acceso a los frames obteniendo un Objeto Window(), con lo cual podremos usar los métodos y propiedades de dicho Objeto vistos anteriormente.
Así pues, por ejemplo para cargar otra página web en un frame podríamos hacerlo de las siguientes formas:
window.frames[0].location.href = "http://www.google.com/";
window.frames['frmDerecho'].location.href = "pagina2.html";
window.frames.frmDerecho.location.href = "pagina2.html";
Otra forma de acceder a un frame o iframe es usando los métodos getElementById() y getElementsByName() del Objeto Document(). Para ello es necesario que en el código HTML de las etiquetas <frame> o <iframe> posean el atributo id o name, en cada caso.
alert( document.getElementById("frmIzquierdo") );
alert( document.getElementsByName("frmDerecho")[0] );
Observa que en el segundo caso usando getElementsByName() hemos puesto '[0]' después de dicho método: esto es así porque devuelve un array que contiene todos los Objetos referentes a elementos HTML con el nombre especificado. Hemos puesto cero en el índice puesto que sabemos que no hay ningún otro elemento HTML con el mismo nombre.
Accediendo de estos dos modos obtendremos un Objeto Frame() que hace referencia al frame o iframe. Algunas de sus propiedades más importantes son:
- id: establece o devuelve el atributo id.
- name: establece o devuelve el atributo id.
- frameborder: muestra u oculta el borde del frame, pudiendo tomar como valores 1 (lo muestra) o cero (lo oculta).
- height: establece o devuelve el alto del frame en píxels o tanto por ciento.
- marginHeight: devuelve o establece los márgenes superior e inferior (en píxels).
- marginWidth: devuelve o establece los márgenes izquierdo y derecho (en píxels).
- noResize: devuelve o establece si se puede redimensionar el frame usando el ratón, pudiendo tomar como valor 'true' o 'false'.
- scrolling: devuelve o establece el estado de las barras de desplazamiento, pudiendo tomar como valor: 'yes' (las muestra), 'no' (las oculta) o 'auto' (las muestra sólo si es necesario).
- src: devuelve o establece la URL o página web cargada en un frame.
- width: establece o devuelve el ancho del frame en píxels o tanto por ciento.
Por ejemplo, para cargar una página web en un frame o iframe usando estos métodos, escribiríamos el siguiente código JavaScript en la ventana principal:
document.getElementById("frmIzquierdo").src = "http://www.google.com/";
document.getElementsByName("frmDerecho")[0].src = "http://www.yahoo.es/";
En la sección anterior hemos visto cómo acceder a un frame desde la ventana principal, pero también podemos vernos en la situación de tener que acceder a un frame desde la página web cargada en otro frame.
En este caso, lo primero que debemos tener claro es que aunque las páginas web de los frames se cargan en la misma ventana del navegador, se tratan como si cada una estuviese en una ventana diferente.
Así pues, para acceder desde un frame a otro, en la página web cargada en el primero de ellos debemos acceder a la ventana principal del navegador web usando la propiedad top del Objeto Window(), para después acceder al frame deseado de una de las siguientes formas:
window.top.frames['frmDerecho'].location.href = "http://www.google.com/";
window.top.document.getElementById("frmDerecho").src = "http://www.yahoo.com/";
NOTA: debido a la configuración de seguridad de Google Chrome, para que funcione la segunda forma debe cargarse la página web desde un servidor web (no haciendo doble clic sobre el archivo).
Si no indicamos ningún frame podemos cargar una página web en la ventana principal, del siguiente modo:
window.top.location.href = "http://www.google.com/";
Por razones de seguridad, no se puede interactuar entre frames en los que se cargan páginas web de otros dominios.
Al acceder a la página web cargada en un frame es posible acceder también a los elementos HTML, así como a sus variables, funciones, etc.
Como ejemplo, si tenemos una página web 'index.html' que contiene dos frames llamados 'frmIzquierdo' y 'frmDerecho' en los que se cargan a su vez las páginas web 'pagina01.html' y 'pagina02.html', con el siguiente código JavaScript en 'pagina02.html' accederíamos a la variable 'x' y a la función 'mensaje()' definidas en 'pagina01.html':
// Acceder a la variable en la página cargada en el otro frame:
alert( "x = " + window.top.frames['frmIzquierdo'].x );
// Ejecutar la función en la página cargada en el otro frame:
window.top.frames['frmIzquierdo'].mensaje();
Observa que usamos 'top' para acceder a la ventana principal ya que estamos accediendo desde un frame a otro (no sería necesario si el código JavaScript se encontrará en la página principal).
Del mismo modo, es posible acceder también a elementos definidos en una página web cargada dentro de un <iframe>.
Para que funcione correctamente en Google Chrome la página debe cargarse desde un servidor web (no haciendo doble clic sobre el archivo).
