The content shown in your layer can be called from an external file. However, the way you do it in Netscape is totally different than for IE so you will have to create totally browser specific code to do it.
There are 2 ways to accomplish this task:
The CSS 1 standard does not have the ability to have it's contents to be initially called from an external file. But both browsers have a way that you can accomplish the same thing without using CSS at all.
Netscape's antiquated LAYER tag has an attribute (SRC) by which you can call an external file to be it's contents. Here's an example:
<LAYER NAME="textLayer" SRC="text.html" LEFT=50 TOP=50 WIDTH=300 HEIGHT=200 CLIP="0,0,300,200"></LAYER>
Layers work exactly the same way that CSS works, except the styles are made into attributes of the Layer tag.
However IE does not recognize the LAYER tag because it is a proprietory tag that Netscape introduced. When it reads the layer tag it will ignore it. But IE has it's own way of calling external files using the IFRAME tag. IFRAME, an inline frame, works just like normal frames except it's embedded into the page like a plug-in does. You can then position the IFRAME using CSS to put it anywhere on the page thereby mimicing what the LAYER tag does.
<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>
By combining these 2 techniques you can have a page which loads the contents automatically.
Example: source1-layeriframe.html [source] - for a LAYER-IFRAME example. The external file is source1-layeriframe-text.html.
Changing the Source File
In Netscape, to change the source for the Layer you change the .src property:
document.layerName.src = "newfile.html"
In IE, you change the src of the frame as if it were a normal frame:
parent.frameName.document.location = "newfile.html"
For the last example we can make one unified function that will do both the Netcape and IE code at once:
function load(page) {
if (ns4) document.textLayer.src = page
else if (ie4) parent.textFrame.document.location = page
}
Using this function we can change the page by writing:
load("newpage.html")
Example: source2-change.html [source] - allows you to swap the contents
external files: source2-change-text1.html and source2-change-text2.html
Advantages:
For example, to call a function in the main document you have to use parent.functionName() instead of just functionName(). This is because remember in IE, the contents are in another frame even though it doesn't look like it.
Disadvantages:
Hopefully the next version of the browsers they'll include a new CSS property like source:URL(filename.html) which will solve these problems. But for a neat hack to get around using IFRAME in the normal manner you can use technique 2...
With IE's ability to replace content by using it's innerHTML property, you can transfer the content from an IFRAME to a regular DIV thereby avoiding many of the display problems that IFRAME has. The only real disadvantage in using this technique is that the HTML you see will not be the real HTML - it will be a "virtual" layer. This makes your content pages less flexible. Doing JavaScript in the content pages will be very complex - I'm not even going to go into it. I'd only recommend using this technique if your content pages are mostly static.
First off we need an IFRAME that will be the "buffer". You could do it in this manner:
<SCRIPT LANGUAGE="JavaScript">
if (ie4) document.write('<IFRAME STYLE="display:none" NAME="bufferFrame"></IFRAME>')
</SCRIPT>
Then you place one DIV which the content file will be loaded into:
<DIV ID="contents"></DIV>
Now for the Javascript. Here's a function to accomplish the task:
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
}
The main part of the function will load the DIV directly with the external file in Netscape. But in IE will it will load the buffer frame named bufferFrame with the external file. The next obstacle is that you need a way to determine when the external file is completely loaded, so that you can then transfer the contenst of the frame to the DIV. There is hack that will work in IE (see Inside DHTML), but it won't work in Netscape. I forsee that it will be necessary for this to be done in Netscape so I will resort to using BODY onLoad in the external file. You merely call the loadSourceFinish() function and pass what DIV needs to be updated:
<BODY onLoad="parent.loadSourceFinish(id)">
This is done in the external file. This is the external file I used in the example below.
<HTML>
<HEAD>
<TITLE>Content Page</TITLE>
</HEAD>
<BODY onLoad="parent.loadSourceFinish('contents')">
This is my text. This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text. This is my text.
</BODY>
</HTML>
Example: source3-buffer.html [source] - iframe buffer
The DynLayer Object implements it's own load method which is an alernative to using the above function.
| Home | Next Lesson: Working With Forms |