SiteSpinner Pro Tutorials: I-Frames (Inline Frames) on Web Pages

I-Frames (In-Line Frames)

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.

In this tutorial, we cover:

Introduction to i-frames
Basic i-frame example (VM history)
Basic i-frame example (VM home page)
How-to basics
Basic links in i-frames
Backgrounds in i-frames
Problem -- i-frame contents not updating when you preview
Changing the i-frame contents -- link with target
Changing the main (parent) page from within an i-frame
Other files to display
Problems you may meet
Problem: file replaces the main page
Problem: file displayed in the wrong i-frame
Problem: no file displayed in the i-frame
Problem: "File Not Found" error in i-frame

Introduction to i-frames

When frames were first added to web pages, you had to 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 most things the old frames could do, but more conveniently.

Common uses for i-frames are:

Slide-shows -- display a series of images in the same place
Sales information -- in response to a click, display extra information about a product
Site navigation

For IE (Internet Explorer) visitors, you can assign special effects to your embedded i-frame pages -- try the page transitions using the Page Editor > Special Effects.

For this tutorial it is helpful to know some of the basics about the Embed File or Media Editor -- you need to open it to create an i-frame.

Basic i-frame example (VM history)

Following is an i-frame showing the history of Virtual Mechanics (History.html):

To create a frame like this:

Open the Embed File or Media Edtior and select HTML (IFrame) from the drop-down Format list. It is the default, so should already be selected.
Click the Page List button and select one of the other pages in this project. We used the History page
Check Use Scroll Bar the bottom. This tells the i-frame to display a scroll bar if the page is too tall to fit completely in the i-frame window
Click OK

You should immediately see a window with the content of the other page showing through. This happens only for pages, not for files.

When you preview, use the double preview arrows to preview the entire project. You need to build both the current page and the one in the i-frame.

That displays another page from the current project. Instead of the Page List button, you could select the Filepath button and enter the full URL of another page elsewhere on the web. Which we'll do next.

Basic i-frame example (VM home page)

Here is an i-frame set up to view the Virtual Mechanics home page (works only in preview or publish modes, and you must be connected to the Internet):

If the frame is too small to show the full page, it just shows the top left-hand corner of the page. At a target resolution of 1024 pixels wide, the i-frame is wide enough, but not tall enough. So there is a vertical scroll bar, (not visible on the workpage) because we asked for it. There may be a horizontal bar too, if the page needs it.

If you specify a page in your current project, it will show on the workpage. If you specify an html file (or any other 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 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 have a normal page link in the page in the i-frame, the new page will replace the existing one, inside the i-frame.

If you have links marked "Open in New Window", that also will work as you might expect. The page will appear in a new window and will not change the contents of the i-frame.

Backgrounds in i-frames

Various browser differ in how they display i-frames. One obvious difference is in the backgrounds. IE8 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.

If you are striving for a particular look, be sure to check the result in the browsers that are important to you.

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-frame. 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 in the i-frame yet.

Changing the i-frame contents -- link with target

The real interest is how you can change an i-frame's contents from outside the i-frame itself. This method uses a regular page link with an extension:

Link type [ page ]
Link URL: MyPage
Code: target="IFrameName"

The first two parts of the link are perfectly normal and are just like a regular page link. For the MyPage, substitute the actual name of the page. (Select it of course from the drop-down page list -- don't type it in.)

The last part of the link, the target part, is new. It specifies the name of the target -- i.e., the name of the i-frame which is to display the page. The IFrameName is the name of the target i-frame. As mentioned in How-to basics, you may wish to give the i-frame a name you can remember. If you don't rename it, the name you use will be geo followed by a number -- like geo1345.

Changing the main (parent) page from within an i-frame

The special target name _parent is reserved for the main page -- the page holding the i-frame. A _parent target allows you to change the main page in response to a click inside an i-frame. The format of the link is the same as we covered earlier, except for a small variation.

Code: target="_parent"

Instead of an i-frame target like geo1345, we now specify _parent as the target frame. The long leading dash is the underscore character, usually typed with Shift and the "-" key.

Let's demonstrate, using the i-frame, geo1345, above. Preview, and view this text.

We need a page with the _parent link to be be in the i-frame. That's this page -- Iframes. The new main page we'll load into _parent is index.html. So we put the _parent link into this page (Iframes), and frame the link in the heavy red box just below.

Then we put this page (Iframes) into the i-frame -- we'll use a link. So while still in preview:

Click this Iframes page link
Nothing seems to happen, but if it wasn't there before, a copy of this page (Iframes) is now inside the i-frame, geo1345, marked above with two red arrows in the left margin
Scroll down inside the i-frame, geo1345, until you get to geo1345 again
Then continue a little further to... here! (Still inside the i-frame.)

Other files to display
So far, we have considered putting only pages from the current project or from web sites into your i-frame. You can put pages from other projects into your i-frame, images or text files. Choose the correct link type for the item you want to display then fill out the code field in the link editor, just as we did for the examples above.

Problems you may meet

The problems you may meet relate mostly to pages or files displaying in the wrong place or not at all. Always, the first thing to do is to check for typos in the code. These errors can be hard to spot, so check carefully. Even try retyping the whole code line.

The symptoms of the problem give an indication of the problem area. Here are some possible symptoms, followed by possible cures:

Problem: file replaces the main page

This error indicates that the file you specified actually exists, but that the code part is seriously amiss. Check the syntax of the target part -- it should be like this:
target="geo1345"

The geo1345 should be the geometry name of the i-frame you are targeting. Make sure that a target of that exact name really does exist. Check the capitalization too -- that matters.

Also check that you put the double quotes in the right place -- and that there are two of them.

Problem: file displayed in the wrong i-frame

This error indicates that the file name part of the link is OK, and that the code part of the link is mostly OK. It just sent the file to the wrong i-frame.

Check that the code specified the correct name for the i-frame. This will start with geo and then some number -- this will be the name showing in the Name field of the Embed File or Media Editor.

Problem: no file displayed in the i-frame
If you click a link to change the contents of an i-frame and nothing happens, check that
you specified the correct target i-frame name. If you specify the wrong frame, that i- frame may indeed be changing when you click -- but you won't notice it if it is outside your current view.

Problem: "File Not Found" error in i-frame
This error indicates that the target part of the link is correct, but that there is a problem with the file name part. Make sure the file you are referencing really does exist. If you used a blank link type, check that you have the file name exactly correct. The file name includes the name, a dot and the file extension (perhaps .html). Avoid spaces and punctuation -- check the suggestions for page and other names.

See also:
Links Tutorial
Embed File or Media Tutorial