| Artículos | 01 DIC 1998

Frames y contenidos con Javascript

Compartir

Faustino Forcén.

En este artículo encontrará la forma adecuada de hacer que un servidor, con una página de arranque, sin frames, pueda acceder a las secciones del servidor, que sí contiene frames . Como puede ver en las capturas que acompañan este artículo, se quiere tener una presentación distinta del contenido del servidor desde la que se accede a un frameset, ( conjunto de frames que definen una estructura dentro de la página ) donde uno de los frames es común a todo el servidor .

El resto del frameset es variable en función de la sección en la que nos encontramos . Y desde la página principal es posible ir directamente a cada una de las secciones . La forma rápida y sencilla de hacer esto es crear un frameset para cada sección, duplicando el frameset original y variando únicamente la página que carga como cabecera de cada sección . La forma elegante es tener un único frameset que carga la página de cabecera de forma dinámica, en función de la sección a la que se quiere ir . La teoría es sencilla, y la práctica también . Aunque, como todo en el mundo del HTML, tiene sus pequeñas pegas . La solución que se plantea en este artículo no funciona con Microsoft Explorer para Windows .

Antes de seguir, la consabida y típica teoría . Si un programador ( hablamos de un programador en un lenguaje de alto nivel ) quiere que al abrir una ventana se muestre un contenido determinado, debe pasar una variable que indique el contenido que desea mostrar como parámetro de la función que abre la ventana . Todos los lenguajes definen alguna forma de enviar y recibir parámetros entre funciones, JavaScript también . El problema es que en el caso que nos ocupa no es posible usar JavaScript . Con JavaScript es posible controlar las páginas y objetos de la página pero sólo si ya existen . Es decir, una vez tenemos nuestro frameset es sencillo alterar el contenido de cada frame o de partes de la página . Sin embargo aquí queremos modificar un frameset antes de que exista; es decir, crear uno nuevo y abrirlo variando el contenido sobre la marcha .

Es en este momento de miedo, confusión y duda cuando se recurre a un mecanismo poco conocido de los URL: la posibilidad de enviar parámetros a los CGI dentro de un URL . Adicionalmente, repasaremos una rutina sencillita para desplazarse a través de un juego de páginas predeterminado; en lugar de tener un botón en cada página, un único botón en un frame sirve para navegar por todas ellas .

Enlaces mágicos

El link concreto que se encarga de la magía es uno como el que se muestra a continuación . Los parámetros se pasan dentro de la url, separados del enlace por un signo de interrogación . Si se desean pasar varios parámetros, se deben separar los signos ?&? ( ampersand ) de este modo: enlace ? variable1=valor1&variable2=valor2& . . . &variableN=valorN

< A HREF= " imain . html ? page=isoft . html "

// y un poco de código adicional en el enlace

// este primero cambia la imagen al pasar por encima del enlace

onMouseOver= " imageOver ( 'isoft' ) ;

// este otro escribe un texto en la barra de estado, en la parte inferior

window . status='Commercial soft, shareware, even freeware . . . ';return true;

// se vuelve a dejar la imagen original

onMouseOut= " imageOut ( 'isoft' ) ; "

// este último soluciona el problema que suele suceder cuando se hace un clic sobre una imagen que se ha cambiado con imageOver

onMouseUp= " imageOut ( 'miguel' ) ; " >

// la imagen se identifica con el tag NAME para que las rutinas imageOver ( ) e imageOut ( ) funcionen correctamente .

< IMG SRC= " images/home/isofta . gif " WIDTH= " 113 " HEIGHT= " 25 " ALT= " Software "

NAME= " isoft " BORDER= " 0 " > < /A >

Cada uno de los enlaces en la página principal es similar a este, variando unicamente el parámetro detrás del nombre page y los detalles de la imagen que contiene el enlace .

Donde se encuentra la verdadera magia es dentro del documento imain . html, que es al que se accede en los distintos enlaces . Logicamente, al llegar a este punto, se ha determinado que el navegador soporta frames y JavaScript .

// esta función se empleará más adelante como el equivalente a una clase en C++ . . .

// basicamente busca el valor de la variable name dentro de la cadena de parámetros que previamente se ha extraido de la URL . Esto quiere decir que esta función depende de la existencia de otros elementos, en concreto de las variables cgiString y DELIMITER .

// el parametro link se usa como valor por omisión para los casos en que no se pasa valor para esta variable en concreto

function frameObject ( name, link ) {

// se declara name como dato miembro de esta " clase "

this . name = name;

partialString = '';

// si existe la variable que se pide . . . .

if ( cgiString . indexOf ( name + '=' ) ! = -1 ) {

// coloca en partialString el resto de la cadena con los parámetros

partialString = cgiString . substring ( cgiString . indexOf ( name + '=' ) + name . length + 1, cgiString . length ) ;

// si existe el delimitador ampersand . . .

if ( partialString . indexOf ( '&' ) ! = -1 ) {

// el link es la parte de los parámetros desde que se encuentra la variable hasta el siguiente ampersand

this . link = partialString . substring ( 0,partialString . indexOf ( '&' ) ) ;

}

else {

// si no hay mas parámetros, el link es el resto de la cadena de parámetros

this . link = partialString;

}

}

else {

// si no hay parámetro para esa variable, link es el enlace por defecto

this . link = link;

}

}

// aqui es el punto en que el Explorer de Windows diverge de todos los demás navegadores . CallingURL en ese caso no incluye los parámetros . . .

var callingURL = parent . document . URL;

var cgiString = callingURL . substring ( callingURL . indexOf ( ' ? ' ) ,callingURL . length ) ;

var DELIMETER = '&';

// aqui se crea un objeto de tipo frameObject para leer la variable page, pasando software . html como página por omisión

frameObject [ 1 ] = new frameObject ( 'page', software . html' ) ;

// aquí se crea dinámicamente el frameset .

document . writeln ( ' < FRAMESET ROWS= " 60,* " BORDER= " 0 " FRAMESPACING= " 0 " FRAMEBORDER= " 0 " > ' )

document . writeln ( ' < FRAME SRC= " tool . html " NAME= " toolbar "

SCROLLING= " NO "

MARGINWIDTH= " 0 " MARGINHEIGHT= " 0 " NORESIZE > ' )

// esta linea tiene la clave . la que crea la línea que contiene la página que se ha pasado como

// parámetro en la URL

document . writeln ( ' < FRAME SRC= " ' + frameObject [ 1 ] . link + ' "

NAME= " producto " MARGINWIDTH= " 0 " MARGINHEIGHT= " 0 " NORESIZE > ' )

document writeln ( ' < /FRAMESET > ' )

Un poco más allá

Para completar este caso, en el mismo site se creó una barra de navegación superior para avanzar y retroceder entre las páginas del mism

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información