Technical notes index

FORCING A PAGE INTO AN iFRAME


Firstly I should make it clear that this page is about forcing your own page into an iframe. People who try to force someone else's page into an iframe often find it doesn't work as that page has coding in place to stop you doing this, which breaks the page out to its own page. (Try placing this page into an iframe or frame and you'll see what I mean.) There's no way round that, and this page is not about that issue.

An iframe is an area of your web page into which you can load another, separate, page. The value of this is that you can use links in the main page to change the page which appears in the frame, without having to reload the entire page. You can see it in operation in the Index page to my Technical notes section (demonstration pages linked to in this page will open in a new window or tab; just close it to return to this page). When you click a link in the left-hand column, the contents of the area on the right will change.

Examples of the coding are shown below: obviously you wouldn't include the line numbers (and if you copy the codes out to a plain text file the numbers will not be included). You can also download a zipped text file containing the codes here. (If you look at the codes in the actual pages you will see additional or changed codes which are doing separate functions - I've kept the codes simple here.) I've assumed that the sub-pages within the frame are in the same directory as the master page which contains the frame, otherwise extra programming is needed to cope with the directory change.

For reasons which will become apparent later, you need to identify the sub-pages by including something at the beginning of their filenames - for example, mine are named index-icloud.html, index-podcasts.html and so on.

This is the basic code for the iframe, with 'index-home.html' as the default page:

<iframe src="index-home.html" name="framepages" style="border: 0px solid ; height: 700px; width: 538px;" scrolling="auto"></iframe>

(You can set height and width to suit your requirements, and scrolling="no" would disable scroll-bars (where they appear).  The "name" can be anything you like.)

This is the code for a simple text link, in this case to bring up 'index-podcasts.html' within the frame.

<a href="index-podcasts.html" target="framepages">Podcasts</a>

So far so good; it works as expected. However, if search engines post a link to one of the sub-pages then people will come to the sub-page by itself rather than in its proper place and it will look like this - (the page has extra code so that calling it from this page will show it by itself as a demonstration). Obviously we don't want that, so we need to force the page into the frame as you will see happen if you select the index-icloud.html page.

We can achieve that easily enough. The first step is to add this coding to the head section of all of the sub-pages:

  1. <base target="_top">
  2. <script>
  3. if ((document.URL.indexOf('file')) >=0) {}
  4. else if (top.location == self.location) {
  5. top.location.href="index.html"}
  6. </script>

Line 1 is optional - without it any linked pages will open within the frame; with it they will replace the main page in the browser window - it depends on what you want to happen.

Line 3 recognizes that you have opened the page on your computer, so that you can see the page by itself for diagnostic purposes ('{}' means 'do nothing and stop this 'if' here'). You can remove it; if you do so remove the 'else' at the beginning of the next line. Then on your computer you will go back to the master page when you open the file.

Line 4 tests whether the page appear by itself or in a frame; if it's by itself then Line 5 bounces you to the master page, in my case index.html.

This gets you back to the master page, but of course you get the default version with the original sub-page, not the sub-page you came from, which is likely to irritate people. So we need to arrange that the master page recognizes what page you've come from, and displays that page in its iframe. The traditional way of doing that was to have a separate copy of the master page, each with the appropriate sub-page in the frame, and link to that in the code above. This is messy and inconvenient - ideally we just want just the one master page, but intelligent enough to serve up the correct sub page. This is how we achieve it, by replacing the iframe code I quoted above by the following (it has some content specific to my site which obviously you will amend to suit yours):

  1. <script>
  2. lastp = document.referrer
  3. var fpage = ("index-home.html");
  4. slsh = (document.referrer.lastIndexOf('/'))
  5. nme = (document.referrer.substring(slsh +1))
  6. if (lastp =="") {}
  7. else if ((lastp.indexOf('rfwilmut.net/notes/index-')) >=0) {fpage = nme}
  8. document.write('<iframe src=' + fpage + ' name="framepages" style="border: 0px solid ; height: 700px; width: 538px;" scrolling="auto"></iframe>')
  9. </script>

Line 2 makes the code 'lastp' (which can be anything) equal 'document.referrer' which reads the full URL of the page from which you came to the current page.

Line 3 sets up a variable called 'fpage' (again this can be anything) whose default content is the URL of the first sub-page to appear - index-home.html - and which can be varied by subsequent programming.

Line 4 sets 'slsh' (which again can be anything) to find the last '/' in the URL of the referring page and note its position.

Line 5 sets 'nme' (which again can be anything) to read from after the last slash to the end, thus extracting the filename.

Line 6 instructs the script to do nothing if there is no previous document (e.g. if the URL had been entered manually) and thus show the default content of the iframe.

Line 7 specifies that only if the final part URL of the referring page (i.e. the file name) begins with the part of the filename we chose earlier for all the sub-pages (in this case 'index-') then the previously established variable 'fpage' will be set to 'nme' - the filename of the referring page. This is to prevent pages which are not sub-pages but have a link to the master page (such as this one) from being forced into the frame. You would amend this to enter the full URL of one of the sub-pages as far as the end of the text chosen to identify it as a sub-page.

Line 8 uses 'document.write' (which places specified content into the code as if it had been written there in the usual way) to write the code given in the first example above which defines the iframe; but instead of the source page being the default page it's specified by 'fpage' so that the filename of the referring page appears there.

So now we have a master page where links on that page can change the sub-pages which appear in the iframe (without having to reload the entire page); and if - and only if - someone enters the URL of one of the sub-pages, then they will be redirected to the master page but with the sub-page they asked for appearing in the iframe, rather than by itself; other pages on the site (or elsewhere) which contain a link to the master page will see it with the default contents of the iframe.

© Roger Wilmut. This site is not associated with Apple.