SiteSpinner Tutorials banner
Virtual Mechanics Logo
SiteSpinner
®
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:
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 Import Object 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):






SiteSpinner logo
Page Editor Button
To create a frame like this:
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):
Embed File or Media button
Preview all pages
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.
How-to basics

To make your own i-frame like those above:
Embed File or Media button
Embed IFrame
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 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:
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.




Preview all pages
Preview current page
Quick Editor i-frame link
Setting an IFrame target
The image on the right shows what a typical i-frame link looks like in the Quick Editor.

You can make the same kind of link from the Object Editor > Link tab.

Quick Editor button
Object Editor button
And you can do it from inside the Text Editor by using the Code field there. Like this:
Text Editor: i-frame link
Text Editor: i-frame link
Below is another i-frame, but this time there are four links underneath, each on a text object, to change the page in the i-frame. Then the same four links are repeated from inside a text object.

Preview to see how it works.
Red arrow
This i-frame is
named geo1345

Red arrow
Import Object page
Index page
I-frames page
Links page
Here are the same links again, but this time done from inside the text editor:

              Index page         Links page         Import Object page            I-frame page
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:
Change parent (main) page
Remember to use your browser Back button to come back here. Then still inside the i-frame, click the red box. The main page will change.

Below is the Quick Editor view of that _parent link on the red box:


Targeting the parent
Targeting the parent
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 Import Object 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
Import Objects Tutorial