El contenido que se encuentra en tu capa puede ser llamado de un external file (fichero externo). Como sea el caso la forma que hay que hacerlo en Netscape es totalmente diferente que en Internet Explorer, entonces lo que tienes que hacer es crear un código totalmente especificado para que el browser haga el llamado.
Hay dos formas para hacer que esto funcione:
El CSS 1 standard no tiene la flexibilidad de que sus contenidos sean inicialmente llamados por un fichero externo. Sin embargo, los dos browser tienen una forma de hacer la misma cosa sin utilizar CSS del todo.
El tag antiguo LAYER de Netscape tiene un atributo que es (SRC) el cual un fichero externo puede ser llamado para que sea el contenido. Aquí hay un ejemplo:
<LAYER NAME="textLayer" SRC="text.html" LEFT=50 TOP=50 WIDTH=300 HEIGHT=200 CLIP="0,0,300,200"></LAYER>
Las capas funcionan exactamente de la misma manera que los CSS, con la excepción que los styles estén hechos con los atributos de la capa tag.
Sin embargo IE no reconoce el tag LAYER porque es un tag propiedad de Netscape ya que fueron ellos quienes lo introducieron. Cuando lee la capa tag simplemente lo ignora. Pero IE tiene su forma propia para llamar a los ficheros externos utilizando el IFRAME tag. IFRAME tag, es un inline frame (marco enlínea), funciona justamente como un marco normal excepto que esta fijado a la página como haría un plug-in (acople).
<STYLE TYPE="text/css">
#textDiv {position:absolute; left:50; top:50; width:300; height;200; clip:rect(0,300,200,0);}
</STYLE>
<DIV ID="textDiv">
<IFRAME SRC="text.html" NAME="textFrame" SCROLLING="No" WIDTH="300" HEIGHT="200" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No"></IFRAME>
</DIV>
Combinando estas 2 técnicas puedes tener una página que carga automáticamente los contenidos.
Ver source1-layeriframe.html [fuente] - para un ejemplo LAYER-IFRAME. El fichero externosource1-layeriframe-text.html.
Cambiando el Fichero de Fuente
En Netscape, para cambiar la fuente de la capa, debes cambiar el src property (la propiedad de la fuente):
document.layerName.src = "newfile.html"
En IE, puedes cambiar el src (fuente) del frame (marco) como si fuera un frame normal:
parent.frameName.document.location = "newfile.html"
Por último en este ejemplo podemos hacer una función unificada que funcionará inmediatamente en el código de los dos browsers Netscape y IE:
function load(page) {
if (ns4) document.textLayer.src = page
else if (ie4) parent.textFrame.document.location = page
}
Utilizando está función podemos cambiar la página con escribir:
load("newpage.html")
Ver source2-change.html[fuente] para un ejemplo que te otorga cambiar los contenidos.
ficheros externos: source2-change-text1.html y source2-change-text2.html
Ventajas:
Por ejemplo, para llamar a una función en el documento principal tienes que utilizar parent.functionName() en lugar de solamente functionName(). Esto pasa porque en IE, los contenidos se encuentran en otro frame aunque no parece que sea así.
Desventajas:
Con la esperanza de que sea incluida la próxima versión de browser una nueva propiedad de CSS como source:URL(filename.html) lo cual resolverá estos problemas. Pero por el momento para obtener uso de IFRAME de una forma normal puedes usar la técnica 2...
La habilidad que posee IE para remplazar el contenido con solo usar la propiedad innerHTML puedes transferir el contenido de un IFRAME a un DIV regular evitando así muchos de los problemas de demostración que tiene IFRAME. La única desventaja a esto en usar esta técnica es que el HTML que vez no es el HTML real - será una capa "virtual". Esto hace que las páginas con contenido sean menos flexibles. Si hicieras JavaScript en estas páginas se volvería muy complicado. - Yo ni siquiera voy a comenzar con esto. Solo me gustaría recomendar de usar esta técnica si tus páginas con contenido son principalmente estáticas.
Lo primero que necesitamos es un IFRAME que será el buffer. Puedes hacerlo de la manera siguiente:
<SCRIPT LANGUAGE="JavaScript">
if (ie4) document.write('<IFRAME STYLE="display:none" NAME="bufferFrame"></IFRAME>')
</SCRIPT>
Después pones un DIV en cual le será cargado el fichero con el contenido:
<DIV ID="contents"></DIV>
Ahora para el JavaScript. Está es la función para completar la tarea:
function loadSource(id,nestref,url) {
if (ns4) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
lyr.load(url,lyr.clip.width)
}
else if (ie4) {
parent.bufferFrame.document.location = url
}
}
function loadSourceFinish(id) {
if (ie4) document.all[id].innerHTML = parent.bufferFrame.document.body.innerHTML
}
La parte principal de esta función cargará directamente el DIV con el fichero externo en Netscape. Pero en IE cargará el buffer frame llamado bufferFrame con un fichero externo. El próximo obstáculo que hay es que necesitas una forma de como averiguar cuando el fichero externo esta completamente cargado, de esta forma podrás transferir los contenidos de un frame a un DIV. Esta es la maña que trabajará en IE. (ver Inside DHTML), pero no trabajará en Netscape. Y pude ver que sería necesario que esto sea hecho en Netscape entonces así tuve que recurrir a usar BODY onLoad en el fichero externo. Simplemente tienes que llamar la función de loadSource Finish() y pasar el DIV que se necesita poner al día:
<BODY onLoad="parent.loadSourceFinish(id)">
Esto es hecho en un fichero externo. Este es el fichero externo que he usado en el ejemplo de abajo.
<HTML>
<HEAD>
<TITLE>Content Page</TITLE>
</HEAD>
<BODY onLoad="parent.loadSourceFinish('contents')">
Este es mi texto. Este es mi texto. Este es mi texto. Este es mi texto.
Este es mi texto. Este es mi texto. Este es mi texto. Este es mi texto.
</BODY>
</HTML>
Ver source3-buffer.html [fuente] - para el ejemplo del frame buffer
Mi DynLayer Object Implementa él mismo su método de cargar el cual es una alternativa para utilizar la función de arriba.
| Casa | Próxima Lección: Trabajando con formularios |