Using the iFrame Action in Freeway

An iFrame is an item used on a page which works a a virtual “hole” in the page through which the content of another page can be seen through the frame. This is not to be confused with “framesets” which are something very different – whereas framesets are not as popular as they once were (mainly due to issues with linking, printing, etc.) – iFrames are very browser-friendly.

There are four main reasons why you might want to use an iFrame on your Freeway page:

  1. You can display a page which is live on online at a different web site. This can be, for instance, an online calendar, blog, guestbook or a forum page – and it is often the case that this is the simplest way to set up a free account with an online service and show the content on your page without the visitor needing to leave your site to view it.
  2. An iFrame is very useful if, for instance, you can only use a single Freeway Action on a page (such as the Sequence Timer Action) or if you find that an item is conflicting with something else on your page. Because an iFrame shows the content of a different page, it can often be a workaround.
  3. For Freeway Express users, the only way they can create a scrolling text area on their page is to use an iFrame (because Express does not support “layers” in the same way that Pro does.
  4. An iFrame can be set up to show different content within the frame by clicking on text or graphic buttons set as hyperlinks.
  5. First thing to do is to download the Actions from ActionsForge at iFrame - ActionsForge. Make sure you download the correct version of the iFrame Action for your particular version of Freeway as it is different for Freeway 3.x, Freeway 4 and Freeway 5.
Once you have installed the Action, you can now create an iFrame on your Freeway page.

Setting up the iFrame
  • Click and hold on the Action tool, choose iFrame from the list, then draw an item on your page.
  • Make a note of the iFrame’s height and width (as you will need this later).
The next stage depends on whether you want to display an “external” page (ie, a page on the web on someone else’s site) or an “internal” page (ie, one which is in your Freeway site file).

Displaying an external page
  • If you want to display an external page, select the iFrame, open the Actions palette, click on the URL popup and choose Other… (this will display the Edit Hyperlinks dialog).
  • Click on the External tab of the Edit Hyperlinks dialog, choose http: from the Protocol popup then complete the URL of the page you want to display in the main panel of the dialog window and click OK. See screenshots below.

Note that the iFrame can only display the content of the entire external web page (ie, the top left corner of the web page will be in the top left of the iFrame) – it isn’t possible to display a specific area of an external web page.

Displaying an internal page

If you want to display an internal page of your site, you will first need to create the page you want to display within the iFrame.
  • Create a new page by using one of the Site Panel’s shortcuts or go to Page>New Pages. Make this new page the same width as the iFrame’s width you noted down earlier.
If you don’t need the iFrame to scroll the content, use the same height as the iFrame for the height of your new page. Don’t worry if your new page is longer than the iFrame because an iFrame can be set to scroll if the content is longer than the height of the iFrame. Bear in mind, however, that although it is possible to scroll the content of an iFrame horizontally as well as vertically, we recommend using only vertical scrolling as many visitors find horizontal scrolling confusing and annoying.
  • Add the content to your new page – this can be HTML text, graphics, or whatever you like because it is just like any normal Freeway page.
Note that if you decide to use a vertical scroll bar on the iFrame you will need to leave 20–25 pixels of space on the right side of your new page so that the content has space between it and the scroll bar in the iFrame.
  • Once you’ve added the content to the new page, go back to the page which has the iFrame on it, select the iFrame, click on the URL popup in the Actions palette then choose the page from the list of pages. See below.

Options in the iFrame Action palette

URL: This has already been covered above.

Scrolling: If the new page you’re linking to is the same size as the iFrame, leave the Scrolling popup to the default of No. If you want the iFrame to scroll vertically, choose Auto in the Scrolling popup – which means that the iFrame will scroll if the new page is longer than the iFrame’s height.

Frame border: An iFrame can be made to display a border, and you can choose this option in the Frame border popup. Choose 1 for a 1px black border, choose 0 for no border. Note that if you decide to use a border, subtract the total number of pixels used by the border from the width of the page that will display in the iFrame. For example, if you choose a 1px border, subtract 2px from the width of the iFrame page displayed in the iFrame (if you don’t, then the horizontal scrollbar will display on the iFrame if you used Auto in the Scrolling popup).

iFrame name: Enter a name for the iFrame in the iFrame name field (perhaps “iframe” without the quotes). You need to specify a name for the iFrame so that it is possible to use more than one iFrame on a page. If you use two or more iFrames on a page, you need to ensure that each iFrame’s name is different.

Now preview in a browser to see it working.

Displaying multiple pages within the same iFrame

It’s also possible to display different pages within a single iFrame. This allows you to use HTML text or graphic buttons or tabs on your page which the visitor clicks on to display the relevant content within the iFrame.

To do this, you need to first draw an iFrame on the page and then create the pages you want to display in the iFrame. For this example we’ll use HTML text links to trigger the display of the different pages within the iFrame, but you can simply choose to use graphic items with links applied to trigger the pages.

The best way to explain how to set up an iFrame to display multiple pages is to create your own sample file then use the following steps:
  • Name the first page of the site “home”, draw an iFrame on the page which is 550px wide by 400px high. Draw an HTML item on a blank area of the page, give it a Padding value of 10px, then click inside it, type “frame 1”, type a Return then type “frame 2”. Deselect the item, select it again and then move it to the left of the iFrame item.
  • Now create three new pages, called “frame1page”, “frame2page” and “pageloadframe” respectively. Make each of these pages 550px wide by 400px high and then draw an HTML item to cover the entire page area, giving each HTML item a different color on each page.
  • Finally, draw a new HTML item in the center of each page and enter the relevant page name inside each of them (so they can be identified when they display in iFrame).
Your page should look similar to the page in the screenshot below.

  • Go back to the iFrame page, select the iFrame and open the Actions palette. In the URL popup choose the page called “pageloadframe” – this will mean this page will be displayed within the iFrame when the page loads (ie, without clicking on the hyperlinks). Leave the Scrolling popup as No and set the Frame border popup to 0 (zero). Now enter “iframe” (without the quotes) in the iFrame name field.
  • Now select the “frame 1” text in the HTML item to the left of the iFrame and go to Edit>Hyperlinks, select “frame1page” in the list of pages, enter “iframe” (without the quotes) in the Target field and click OK. Repeat this for the “frame 2” hyperlink in the HTML item to link it to “frame2page”.

Now preview the file in a browser to see that when the page loads you will see the “pageloadframe” page displayed in the iFrame. Click on the “frame1” text link to see the “frame1page” page display, then click on the “frame2” text link to see the “frame2page” page display.

Note: There is a sample Freeway file included within the Zip archive in the link below this article. This is a Freeway 5 Express file which all FW5 and FW5.5 Pro and Express users can open to see how it is set up on the page and in the Actions palette. (257.1 KB)