Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
I-Frames -- Advanced
The basic i-frames page covers an introduction to i-frames. There are two ways to change their contents -- target syntax and FillFrame syntax.
This page covers some more of the many ways you can use i-frames. Here are the main topics: (Sorry, last one still incomplete)
This page covers some more of the many ways you can use i-frames. Here are the main topics: (Sorry, last one still incomplete)
- Display text files directly in an i-frame
- Display image files directly in an i-frame
- Restore the window history after target syntax screws it up
- Target syntax v FillFrame syntax: a comparision
- Setting up i-frames on another page that has not yet loaded
Text files in an i-frame
It is possible to display a simple text file in an i-frame.
Here is what it looks like without the i-frame, Below is what it looks like in an i-frame.
It is possible to display a simple text file in an i-frame.
Here is what it looks like without the i-frame, Below is what it looks like in an i-frame.
Under construction
I-frame links from inside text objects -- using "FillFrame syntax"
Jump to bookmark on the main page
Jump to bookmark on the main page
In the Foreign Object Editor, I set up the file path to be 'IframeSampleText.txt' -- the name of my text file. It is also possible to dynamically change the i-frame contents, using similar methods for html files. Remember this time that the file extension is ".txt ", not ".html", so you will need to change it in the link or code object whenever it appears.
Image files in an i-frame
It is possible to show images directly in an i-frame without having the images on a page of their own. This has obvious advantages for slide-shows where all you want to display in the i-frame is the image and nothing else. No html page needed.
So, here are the images I have been using, this time placed directly into an i-frame using target syntax:
It is possible to show images directly in an i-frame without having the images on a page of their own. This has obvious advantages for slide-shows where all you want to display in the i-frame is the image and nothing else. No html page needed.
So, here are the images I have been using, this time placed directly into an i-frame using target syntax:
Setting the i-frame for images
For images, you probably don't want margins, so I suggest you explicitly set them to 0. Or set them to whatever value you want. Without this step, you are at the mercy of the browser for a margin. See i-frame parameters.
For images, you probably don't want margins, so I suggest you explicitly set them to 0. Or set them to whatever value you want. Without this step, you are at the mercy of the browser for a margin. See i-frame parameters.
The links above are quite similar to those discussed previously under target syntax.
Link type: (leave blank)
Link URL :images/DendrobiumSmall.jpg" target="geo1657
Because the image is in my images folder, and not the root folder, I specified images/ ahead of the file name. And because it is an image file to be displayed, I specified jpg as the file extension, not html.
Link type: (leave blank)
Link URL :images/DendrobiumSmall.jpg" target="geo1657
Because the image is in my images folder, and not the root folder, I specified images/ ahead of the file name. And because it is an image file to be displayed, I specified jpg as the file extension, not html.
IE6 ImageToolbar
One disadvantage of placing images directly in the i-frame is that the IE6 image toolbar appears on the image (when running IE6). It may be possible to disable it, but I have not found a way, yet...
One disadvantage of placing images directly in the i-frame is that the IE6 image toolbar appears on the image (when running IE6). It may be possible to disable it, but I have not found a way, yet...
Resizing i-frames to suit their contents
I-frames have width and height parameters, so it should be possible to adjust these in response to changes in the i-frame contents.
I-frames have width and height parameters, so it should be possible to adjust these in response to changes in the i-frame contents.
Under construction
Search Engines and i-frames
Search Engines can probably index a page statically stored in an i-frame. Also when you use the target syntax. However they almost certainly won't index pages placed in to i-frames using the Fill-Frame syntax or any other javascript method.
This may not be a problem -- most of the pages I use here in i-frames are test or example pages and won't make much sense if viewed out of context. I don't want search engines to index them, so if they can't find them, so much the better.
If you want your pages to be indexed, you will need to somehow provide standard links to them. Using a site map is one possibility.
Search Engines can probably index a page statically stored in an i-frame. Also when you use the target syntax. However they almost certainly won't index pages placed in to i-frames using the Fill-Frame syntax or any other javascript method.
This may not be a problem -- most of the pages I use here in i-frames are test or example pages and won't make much sense if viewed out of context. I don't want search engines to index them, so if they can't find them, so much the better.
If you want your pages to be indexed, you will need to somehow provide standard links to them. Using a site map is one possibility.
I-frames elsewhere on this site
The following pages describe other uses of i-frames:
The following pages describe other uses of i-frames:
- Basic i-frames: An introduction to i-frames
- Target syntax: Basic way of changing the content of i-frames
- FillFrame syntax: More flexible way of changing the content of i-frames
- Using the OnLoad Event: Changing a secondary i-frame whenever a primary changes
- Slide shows: with manual or automatic slide advance
- Background music: keep background music playing while you change foreground pages
- Long text object: avoid browser line spacing differences -- put your long text object in an i-frame
Restore history
When you are working with i-frames and displaying a series of pages or images with target syntax, all those objects appear in the window history.
This is a problem only with target syntax. If you use FillFrame syntax, you can control whether or not the history is updated.
There don't seem to be any ways of preventing the target syntax from adding to the history; nor does it seem possible for code to clean up the history. (I think browsers don't allow code to mess with history because there are security implications.)
This code is a partial answer. If the user clicks on a link, it restores the history to the state it was when the page was opened.
When you are working with i-frames and displaying a series of pages or images with target syntax, all those objects appear in the window history.
This is a problem only with target syntax. If you use FillFrame syntax, you can control whether or not the history is updated.
There don't seem to be any ways of preventing the target syntax from adding to the history; nor does it seem possible for code to clean up the history. (I think browsers don't allow code to mess with history because there are security implications.)
This code is a partial answer. If the user clicks on a link, it restores the history to the state it was when the page was opened.
I'm not completely happy with this approach, so I'm on the lookout for better ideas. But this will have to do for now.
Another idea is a Go Back link which goes back one further step than the code here does -- this should return you to the page you came from. However, this a source of potential confusion with the browser Back button
The ideal solution would be to prevent the i-frame changes from updating the history -- but how?
Another idea is a Go Back link which goes back one further step than the code here does -- this should return you to the page you came from. However, this a source of potential confusion with the browser Back button
The ideal solution would be to prevent the i-frame changes from updating the history -- but how?
Link
Make a link like this:Link text Restore window history
Link title Restore the window history to the state it was when you first entered this pageThis shows a text link, but you could also use an image. Change the link text and link title as you wish. I suggest use a title on the link to clarify its purpose.
Make a link like this:
- Link type (leave blank)
- Link URL
The above i-frame and links are copies from Image files in an i-frame above. This time the frame has no internal margins specified as parameters -- notice what your browser chooses. Click a few links on the left to build up the history, then click the Restore window history link. The history should revert to what it was when you started.
To use an effect like this you need two things:
Place the following code object on your page (no CSS positioning necessary):
To use an effect like this you need two things:
- a code object on the page
- a link to that code object
Place the following code object on your page (no CSS positioning necessary):
<SCRIPT type="text/javascript">
var HistoryStart=history.length
function RestoreHistory(){
if (history.length>HistoryStart){
history.go(-(history.length-HistoryStart))
}
}
</SCRIPT>
var HistoryStart=history.length
function RestoreHistory(){
if (history.length>HistoryStart){
history.go(-(history.length-HistoryStart))
}
}
</SCRIPT>
Target syntax v FillFrame syntax
Target syntax is a more direct way of changing the i-frame content -- set up a link and you are done. However, it has two disadvantages:
Target syntax is a more direct way of changing the i-frame content -- set up a link and you are done. However, it has two disadvantages:
- You can use it only with links from objects, not on links from within text objects
- The main window history is updated with each i-frame change. You can mitigate this effect with a Retore History button