Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
I-Frames -- Using the OnLoad Event
The Basic I-frames page covers the basics of i-frames and the i-frame parameters. To make sense of this page, you should also be able to use target syntax or FillFrame syntax to set a link on an object to change the contents of an i-frame.
This page shows how to change a related secondary i-frame whenever a primary i-frame changes.
This page shows how to change a related secondary i-frame whenever a primary i-frame changes.
In the Foreign Object Editor for an i-frame is space for parameters. As shown in the image above, one of these can be the onLoad event.
The onLoad event for an i-frame happens whenever the contents of the i-frame has changed. This will happen when the whole main page first loads, and also, whenever the page in the i-frame is changed in response to a user request. It happens only when the loading of the page in i-frame is compete, and not before.
The onLoad event for an i-frame happens whenever the contents of the i-frame has changed. This will happen when the whole main page first loads, and also, whenever the page in the i-frame is changed in response to a user request. It happens only when the loading of the page in i-frame is compete, and not before.
OnLoad event example 1
Let's look at an actual example. Suppose we have two i-frames -- a primary and a secondary. We want the secondary's content to change whenever the primary frame changes. This will normally be some supporting information relevant to the primary i-frame page. But not in this case -- I just want some demonstration subjects
Let's look at an actual example. Suppose we have two i-frames -- a primary and a secondary. We want the secondary's content to change whenever the primary frame changes. This will normally be some supporting information relevant to the primary i-frame page. But not in this case -- I just want some demonstration subjects
Click any of the links to change the primary -i-frame contents. There should be nothing new here -- the links to change the primary i-frame contents are standard target syntax.
What is new is that I have hooked into the onLoad event for the primary i-frame. This runs some code to load the second frame. Apart from this code, there are no links operating on the second i-frame.
If you list an invalid file in the list of secondaries, you will get a 'file not found' error. Slide 4 demonstrates this.
If you load an unrelated page into the first frame, (one that does not have a matching secondary) the second frame will display a blank page. The bottom link above demonstrates this.
What is new is that I have hooked into the onLoad event for the primary i-frame. This runs some code to load the second frame. Apart from this code, there are no links operating on the second i-frame.
If you list an invalid file in the list of secondaries, you will get a 'file not found' error. Slide 4 demonstrates this.
If you load an unrelated page into the first frame, (one that does not have a matching secondary) the second frame will display a blank page. The bottom link above demonstrates this.
Special setup for secondary i-frame
The steps involved are these
The steps involved are these
- Set up an onLoad event for the primary i-frame
- Place a special code object on your main page
- Modify the code object to suit your project
Set up an onLoad event for the primary i-frame
Set these details as a parameter for the primary i-frame in the Foreign Object Editor:
Name : onLoad Value: FillSecondary()
This tells the primary that whenever it has loaded a new page or file, it is to call a javascript function named "FillSecondary()".
Set these details as a parameter for the primary i-frame in the Foreign Object Editor:
Name : onLoad Value: FillSecondary()
This tells the primary that whenever it has loaded a new page or file, it is to call a javascript function named "FillSecondary()".
<SCRIPT type="text/javascript">
function FillSecondary() {
var PrimaryFrame ='geo1708'
var SecondaryFrame='geo1962'
var SecondaryFolder='image'
var NoShow='BlankPage.html'
var Primaries = new Array('Slide1.html','Slide2.html',
'Slide3.html','Slide4.html')
var Secondaries = new Array ('geo137p8.jpg','geo134p8.jpg',
'geo15p8.jpg','geo14p8a.jpg')
//get the name of the file in the primary frame
var URL = frames[PrimaryFrame].location.href
var Parts = URL.split('/')
var FileName=Parts[Parts.length-1]
//Look for the filename in the primaries list, load the
//matching file in the secondaries list into the second frame
SecondaryFile=NoShow
for (var i=0;i<Primaries.length;i++) {
if (Primaries[i]==FileName) {
SecondaryFile=Secondaries[i]
break
}
}
frames[SecondaryFrame].location.replace(SecondaryFolder+'/'+SecondaryFile)
}
</SCRIPT>
function FillSecondary() {
var PrimaryFrame ='geo1708'
var SecondaryFrame='geo1962'
var SecondaryFolder='image'
var NoShow='BlankPage.html'
var Primaries = new Array('Slide1.html','Slide2.html',
'Slide3.html','Slide4.html')
var Secondaries = new Array ('geo137p8.jpg','geo134p8.jpg',
'geo15p8.jpg','geo14p8a.jpg')
//get the name of the file in the primary frame
var URL = frames[PrimaryFrame].location.href
var Parts = URL.split('/')
var FileName=Parts[Parts.length-1]
//Look for the filename in the primaries list, load the
//matching file in the secondaries list into the second frame
SecondaryFile=NoShow
for (var i=0;i<Primaries.length;i++) {
if (Primaries[i]==FileName) {
SecondaryFile=Secondaries[i]
break
}
}
frames[SecondaryFrame].location.replace(SecondaryFolder+'/'+SecondaryFile)
}
</SCRIPT>
Place a special code object on your main page
Above is the code object with the javascript function named "FillSecondary()". Copy and 'Paste Plain Text' into a code object. You may as well turn CSS positioning off too -- and save yourself a hundred bytes of code.
Because it is important that the code is available when the primary i-frame has loaded for the first time, it is safest to send it to the back with the front/back buttons. I tested this page with it right at the front and that works fine -- so in this case, the location does not matter (much).
Above is the code object with the javascript function named "FillSecondary()". Copy and 'Paste Plain Text' into a code object. You may as well turn CSS positioning off too -- and save yourself a hundred bytes of code.
Because it is important that the code is available when the primary i-frame has loaded for the first time, it is safest to send it to the back with the front/back buttons. I tested this page with it right at the front and that works fine -- so in this case, the location does not matter (much).
Modify the code object to suit your project
The code object above is marked at the part you need to modify to suit your project. Here are the modifications you will need to make:
The code object above is marked at the part you need to modify to suit your project. Here are the modifications you will need to make:
PrimaryFrame: change the 'geo1708' to the geometry name of your primary frame
SecondaryFrame: change the 'geo1962' to the geometry name of your secondary frame
SecondaryFolder: change the 'image' to the name of the folder where your secondary files are stored. If they will be in the folder with your html pages use:
var SecondaryFolder='./'
The code assumes all secondary images are in the same folder, even the blank page
NoShow: Change the 'BlankPage.html to the name of your page that is to show blank
Primaries: Change the 'Slide1.html','Slide2.html' etc. to be the names of your primary i-frame pages or files.
Secondaries: Change the 'geo137p8.jpg','geo134p8.jpg', etc to be the names of your secondary i-frame pages or files.
SecondaryFrame: change the 'geo1962' to the geometry name of your secondary frame
SecondaryFolder: change the 'image' to the name of the folder where your secondary files are stored. If they will be in the folder with your html pages use:
var SecondaryFolder='./'
The code assumes all secondary images are in the same folder, even the blank page
NoShow: Change the 'BlankPage.html to the name of your page that is to show blank
Primaries: Change the 'Slide1.html','Slide2.html' etc. to be the names of your primary i-frame pages or files.
Secondaries: Change the 'geo137p8.jpg','geo134p8.jpg', etc to be the names of your secondary i-frame pages or files.
The lists for primaries and secondaries must follow these rules:There must be a one to one relationship with the two lists. E.g. the the third item in the secondary list must be the one you want to appear if the third item in the primary list is loaded
Separate each item with a comma
Break long lines at a comma
Surround the whole list by a matching pair of round bracketsMy original lists obey these rules. If you want a trouble-free life, make yours do too
Because you are dealing with images you may wish to set the margins as well as the onLoad event. This time, the code object has a new name, FillTwo(), so enter FillTwo()for the onLoad event.
<SCRIPT type="text/javascript">
var CurrSlide=0
function FillTwo(NewSlide) {
var SecondaryFrame='geo1607'
var PrimaryFolder='images'
var SecondaryFolder='image'
var NoShow='BlankPage.html'
var PrimaryFrame ='geo1756'
var Primaries = new Array('DendrobiumSmall.jpg','AppleBlossom.jpg',
'CymbidiumSmall.jpg','Iris.jpg')
var Secondaries = new Array ('geo137p8.jpg','geo134p8.jpg',
'geo15p8.jpg','geo14p8a.jpg')
//if anything defined for the NewSlide, load the primary with either the
//next or previous slide, then exit. OnLoad event will take care of secondary
if (NewSlide != undefined) { //next slide
if (NewSlide>=0){
NewSlide+=CurrSlide
if (NewSlide>=Primaries.length) {NewSlide=0}
}
else { //previous slide
NewSlide=CurrSlide-1
if (NewSlide<0) {NewSlide=Primaries.length-1}
}
frames[PrimaryFrame].location.replace(PrimaryFolder+'/'+Primaries[NewSlide])
CurrSlide=NewSlide
return
}
//get the name of the file in the primary frame
var URL = frames[PrimaryFrame].location.href
var Parts = URL.split('/')
var FileName=Parts[Parts.length-1]
//Look for the filename in the primaries list, load the
//matching file in the secondaries list into the second frame
SecondaryFile=NoShow
for (var i=0;i<Primaries.length;i++) {
if (Primaries[i]==FileName) {
SecondaryFile=Secondaries[i]
CurrSlide=i
break
}
}
frames[SecondaryFrame].location.replace(SecondaryFolder+'/'+SecondaryFile)
}
</SCRIPT>
var CurrSlide=0
function FillTwo(NewSlide) {
var SecondaryFrame='geo1607'
var PrimaryFolder='images'
var SecondaryFolder='image'
var NoShow='BlankPage.html'
var PrimaryFrame ='geo1756'
var Primaries = new Array('DendrobiumSmall.jpg','AppleBlossom.jpg',
'CymbidiumSmall.jpg','Iris.jpg')
var Secondaries = new Array ('geo137p8.jpg','geo134p8.jpg',
'geo15p8.jpg','geo14p8a.jpg')
//if anything defined for the NewSlide, load the primary with either the
//next or previous slide, then exit. OnLoad event will take care of secondary
if (NewSlide != undefined) { //next slide
if (NewSlide>=0){
NewSlide+=CurrSlide
if (NewSlide>=Primaries.length) {NewSlide=0}
}
else { //previous slide
NewSlide=CurrSlide-1
if (NewSlide<0) {NewSlide=Primaries.length-1}
}
frames[PrimaryFrame].location.replace(PrimaryFolder+'/'+Primaries[NewSlide])
CurrSlide=NewSlide
return
}
//get the name of the file in the primary frame
var URL = frames[PrimaryFrame].location.href
var Parts = URL.split('/')
var FileName=Parts[Parts.length-1]
//Look for the filename in the primaries list, load the
//matching file in the secondaries list into the second frame
SecondaryFile=NoShow
for (var i=0;i<Primaries.length;i++) {
if (Primaries[i]==FileName) {
SecondaryFile=Secondaries[i]
CurrSlide=i
break
}
}
frames[SecondaryFrame].location.replace(SecondaryFolder+'/'+SecondaryFile)
}
</SCRIPT>
Code object for example 2
Placing the code object is the same as before, as are most of the modifications. However there are two extras you may need to change:
Primary folder: My primary images are in a folder called images (not to be confused with the other one called just image). Sorry, an accident of history. Change this folder to match the source of your images.
Primaries: The file extensions of you primaries will no longer be .html -- they will likely be something like .jpg. When you change the file names, also change the extension.
Placing the code object is the same as before, as are most of the modifications. However there are two extras you may need to change:
Primary folder: My primary images are in a folder called images (not to be confused with the other one called just image). Sorry, an accident of history. Change this folder to match the source of your images.
Primaries: The file extensions of you primaries will no longer be .html -- they will likely be something like .jpg. When you change the file names, also change the extension.
Links for forward and next buttons
The links are the same as before, but the previous and next buttons are new, so we need links to load the previous or next slide into the primary i-frame. Here's how -- first the link on the previous button
Link type (leave blank)
Link URL javascript:FillTwo(-1)
Now the link on the next button (you guessed it)
Link type (leave blank)
Link URL javascript:FillTwo(+1)
The links are the same as before, but the previous and next buttons are new, so we need links to load the previous or next slide into the primary i-frame. Here's how -- first the link on the previous button
Link type (leave blank)
Link URL javascript:FillTwo(-1)
Now the link on the next button (you guessed it)
Link type (leave blank)
Link URL javascript:FillTwo(+1)
Browser incompatibilities
In creating example 2 above, I ran into some serious incompatibilities
Opera 8.0.2 completely screwed up:
In creating example 2 above, I ran into some serious incompatibilities
Opera 8.0.2 completely screwed up:
- The secondary i-frame appears under the primary even though the secondary is higher in the z-order
- The onLoad event for the i-frame does not work at all
- This means that exampe1 does not work either
Netscape 8.0.3.3 and Firefox 1.0.6 both work in the same fashion:
I have left this page as it stands, warts and all, so you can see for yourself. Example 2 is not usable in browsers other than IE6, but there may be something there that you find useful.
The lesson here is that if you are going to get fancy with i-frames, test your i-frame pages with the browsers that matter to you.
- The secondary background is transparent instead of white as in IE6. This matters only if the background under the secondary is not white
- The onLoad event does not work for images loaded into the primary i-frame, but does work for html pages. If you use the onLoad event like I have, use html in preference to an image format.
I have left this page as it stands, warts and all, so you can see for yourself. Example 2 is not usable in browsers other than IE6, but there may be something there that you find useful.
The lesson here is that if you are going to get fancy with i-frames, test your i-frame pages with the browsers that matter to you.
Possible problem when previewing
In testing, you may find this problem too.
Under IE6, there is a persistent javascript error when this page opens after a rebuild using the preview button. Even with the code object right at the back, the error still shows. Also, it comes and goes, depending on my other page content.
The error causes the secondary i-frame to show empty on initial display. Thereafter, clicking on a link, clicking CTRL+Refresh to reload everything, or using the forward and back buttons, it all works properly.
In testing, you may find this problem too.
Under IE6, there is a persistent javascript error when this page opens after a rebuild using the preview button. Even with the code object right at the back, the error still shows. Also, it comes and goes, depending on my other page content.
The error causes the secondary i-frame to show empty on initial display. Thereafter, clicking on a link, clicking CTRL+Refresh to reload everything, or using the forward and back buttons, it all works properly.
This problem does not show with the page uploaded to my site. Even with everything in my browser cache, and refreshing and using the forward and back buttons it all works.
I suspect the problem is related to the fact that i-frame pages from the local disk load very quickly, perhaps before the code has "realised" that the secondary actually exists. But why it should happen only after the preview rebuild, is a mystery.
This is not a serious issue. In my case I can safely ignore the error. If you should see it you probably can too -- but it may some puzzlement if you see it without being warned.
I suspect the problem is related to the fact that i-frame pages from the local disk load very quickly, perhaps before the code has "realised" that the secondary actually exists. But why it should happen only after the preview rebuild, is a mystery.
This is not a serious issue. In my case I can safely ignore the error. If you should see it you probably can too -- but it may some puzzlement if you see it without being warned.
Other problems you may meet
- A typo in the primary file list will cause the secondary to be blank. This is just like the unrelated page link shown in the left frame in the examples
- A typo in the secondary file list will cause the secondary to show a 'file not found error'. An example of this on the Slide4 or Iris link in the examples
- Typos in the javascript or links. Errors are easy to make and hard to find
