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.
- 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
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.
To make your own i-frame like those above:
- Click the "Embed a File or Media" button
- 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 is outside your current project, enter a Filepath or URL
- Check Use Scroll Bar and Visible Control 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 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.)
- Link type [ page ]
- Link URL: MyPage
- Code: target="IFrameName"
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.
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.
And you can do it from inside the Text Editor by using the Code field there. Like this:
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.
This i-frame is
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.
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.)
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:
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:
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.
Embed File or Media Tutorial