Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
I-Frames (Inline Frames) -- Introduction
An i-frame is like a window frame on your page. What you see in that window is another page. This can be another page of your site, a page of any other site on the web, or an image or text file. Or indeed any other kind of file that your visitor's browser is equipped to handle.
When frames were first added to web pages, you had devote the whole page to the frames -- this page was and still is called the 'frameset'. More recent developments allow you to place frames inline in a regular html page as well -- hence the abbreviation i-frame. I-frames can do everything the old frames could do, but more.
When frames were first added to web pages, you had devote the whole page to the frames -- this page was and still is called the 'frameset'. More recent developments allow you to place frames inline in a regular html page as well -- hence the abbreviation i-frame. I-frames can do everything the old frames could do, but more.
This page is an introduction to i-frames. Here are the main topics:
- Basic i-frame examples: Using the Foreign Object editor to set up an i-frame
- Basic links in i-frames
- Setting i-frame parameters
- Backgrounds in i-frames
- A problem you may meet
- I-frames elsewhere on this site
The link inside this i-frame changes the contents of the i-frame
The first two frames have no border and no scroll bars. The third i-frame has both a border and scroll bars.Because of the image inside, the border is not particularly visible.
If the frames are too small to show the full page, they just show the top left-hand corner -- as do these here. If you specify a page in your current project, it will show on the workpage. If you specify an html file outside the current project, the workpage will show just a placeholder. However, when you preview, the page will show in its full glory.
If the frames are too small to show the full page, they just show the top left-hand corner -- as do these here. If you specify a page in your current project, it will show on the workpage. If you specify an html file outside the current project, the workpage will show just a placeholder. However, when you preview, the page will show in its full glory.
How-to basics
To make your own i-frames like those above:
To make your own i-frames like those above:
-
Click the Import Foreign Object icon.
- Make sure the format displayed is 'HTML (Iframe)'
- Click the Page List button
- From the drop-down list of pages select the page you want to display
- Or, if the page outside your current project, enter a filepath or URL
- Check Use Scroll Bar and Visible Control and if you want those features
- Click OK
- Drag the edges of the i-frame to make it the size you want
Click to display another file from your site, or any page from another web-site
Click to display a page from your current project. then...
Optional: overtype to give your i-frame a new name
click to select a page to appear in the frame
If you are going to use names to refer to i-frames, you may want to change the name to something easier to remember -- like IframeLeft. Just overtype the new name in the Name edit box.
Basic links in i-frames
The page in an i-frame is a normal web-page. Consequently, normal links will work as you would expect. If you just have a normal link in the i-frame contents, it will replace the contents of the i-frame. There is an example of this in the i-frame with scroll bars above. You'll need to scroll down and right to get to the link.
If in the link editor, you select 'Open in New Window', that also will work as you might expect. The page will appear in the new window and will not change the contents of the i-frame.
The page in an i-frame is a normal web-page. Consequently, normal links will work as you would expect. If you just have a normal link in the i-frame contents, it will replace the contents of the i-frame. There is an example of this in the i-frame with scroll bars above. You'll need to scroll down and right to get to the link.
If in the link editor, you select 'Open in New Window', that also will work as you might expect. The page will appear in the new window and will not change the contents of the i-frame.
I-frame parameters
There are some parameters you may want to check out. These parameters are not case-sensitive, and you can place them in any order:
There are some parameters you may want to check out. These parameters are not case-sensitive, and you can place them in any order:
- marginWidth: Space for left or right margin inside the i-frame. in pixels
- marginHeight: Space for top or bottom margin inside the i-frame, in pixels
- onLoad: Action to be taken when i-frame has loaded
My experience with marginWidth and marginHeight is that they have no effect on html pages, but that they do have an effect if you are directly displaying a text or image file.
The onLoad action is a call to a javascript function SomeFunction() which you want to do whenever the page in the i-frame has changed. Some possible uses:
The onLoad action is a call to a javascript function SomeFunction() which you want to do whenever the page in the i-frame has changed. Some possible uses:
- Whenever a page changes, display a related page in another i-frame. Here is an example -- I-Frames -- Using the OnLoad Event.
- Disable the IE6 image toolbar on images (maybe, I haven't done it yet)
- Disable the flash you sometimes see in IE6 when the page in the i-frame changes (again, maybe)
Backgrounds in i-frames
Various browser differ in how they display i-frames. One obvious difference is in the backgrounds. IE6 and Opera show the empty background inside an i-frame as solid white. Netscape and Firefox show an empty background as transparent, so that anything colored behind the i-frame shows through.
You will get an empty background whenever the i-frame is completely empty, or or has an internal margin. A "blank background" on a page made with SiteSpinner is actually a solid white background, so does not show this effect.
View the i-frames below in your favorite browsers and note how the yellow background sometimes shows through. (In particular in Firefox and Netscape.) In SiteSpinner workpage view, the yellow background also shows through.
Various browser differ in how they display i-frames. One obvious difference is in the backgrounds. IE6 and Opera show the empty background inside an i-frame as solid white. Netscape and Firefox show an empty background as transparent, so that anything colored behind the i-frame shows through.
You will get an empty background whenever the i-frame is completely empty, or or has an internal margin. A "blank background" on a page made with SiteSpinner is actually a solid white background, so does not show this effect.
View the i-frames below in your favorite browsers and note how the yellow background sometimes shows through. (In particular in Firefox and Netscape.) In SiteSpinner workpage view, the yellow background also shows through.
Empty i-frame
Image with margins
No margins
There is a more discordant example of this difference in the OnLoad page where two i-frames overlap
Once you know a problem exists, a work-around should be easy.
Once you know a problem exists, a work-around should be easy.
Problem -- i-frame contents not updating when you preview
When you build and test i-frames, remember that you may need to build two or more files. First there is the page containing the i-frame, (main or parent page) and then there are the pages that appear inside the i-frames. Preview "all" is a good way to do this build, but for larger projects you may find it quicker just to preview each page as you change it. It depends on how fast your preview "all" is.
If the page initially displayed in the i-frame is in your current project, it will show on your workpage. If your workpage is showing the wrong and older version of the page, it will be because you have not previewed the page yet.
When you build and test i-frames, remember that you may need to build two or more files. First there is the page containing the i-frame, (main or parent page) and then there are the pages that appear inside the i-frames. Preview "all" is a good way to do this build, but for larger projects you may find it quicker just to preview each page as you change it. It depends on how fast your preview "all" is.
If the page initially displayed in the i-frame is in your current project, it will show on your workpage. If your workpage is showing the wrong and older version of the page, it will be because you have not previewed the page yet.
I-frames elsewhere on this site
The following pages describe the further use of i-frames:
The following pages describe the further use of i-frames:
- Target syntax: Basic way of changing the contents of i-frames -- from objects only, not from within text
- FillFrame syntax: Make links from both inside text objects and from any other object that will take a link. It is a general purpose replacement for target syntax
- Advanced i-frames: more neat things you can do with 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
