Edit: While switching hosts the subdomain I created for the test of the following script didn’t transfer. I’ll try and get them back in the next few days so that you can see a live example of this script.

Something that my regular readers have come to learn is that I am not a professional coder. Everything that I do is because I’ve set out and learned it on my own. I don’t do it for a job, just for my own education. My latest “educational” dabble was using Iframes. Iframes have lost a lot of appeal and are deprecated in XHTML Strict. Nevertheless, there are still many people who use them.

For those who aren’t familiar, Iframes, or Inline frames, are content areas in a website that can load external data. For instance, you could use Iframes to have a content area within your own website that loads CNN.com while your content loads all around it. I decided to use it for this project because I wanted to emulate a website that ran off of an EXT JS library, only didn’t actually use any javascript libraries.

This example uses two Iframes, but you could adapt it to a single Iframe very easily.

Goals

My goal was pretty simple. I just wanted a single page with two Iframes. I wanted to be able to click on one link and have it load different content into each Iframe. On top of that, I wanted to be able to type in a URL and have it pre-load content into the Iframes. A problem with Iframes is that as the Iframe changes the browser URL remains unchanged. Why? Because the actual page your on doesn’t change, only the content inside the Iframe. Thus if I wanted people to be able to bookmark a page or send links, they would have to be able to tell the Iframes what content to load. It took some searching, but here’s what I came up with. I’m sure there are a thousand more efficient ways to do this, but this is the way I figured out. If you’ve got a better one, leave it in the comments!

The goals of this project:

• Create a single page with two Iframes
• Have a single link change the contents of both Iframes to unique web pages
• Be able to dictate the contents of the Iframe pages by simply the URL

Check out the live example.

Setting up your Iframes

The first step is to set up your Iframes. Your code should follow this manner:

1
2

<iframe name="iframe1" src="mypage.html" scrolling="auto"></iframe>
<iframe name="iframe2" src="mypage2.html" scrolling="auto"></iframe>

Place each iframe code in its desired position on your website. There are plenty of other options you can set to control the appearance of your Iframe. A simple Google search will show plenty of coding options. I usually set up the details of my Iframe in my CSS document:

1
2
3
4
5

iframe {
	margin: 3px;
	height: 95%;
	width: 100%;
}

As written, the above CSS code lets your Iframe inherit the size of the DIV tag that it is placed in. Thus each Iframe can have it’s own size and dimensions.

The Javascript

Now lets set up a way to control both Iframes with a single link. In my example I’m using two Iframe boxes. One is named “iframe1″ and the other “iframe2″. We are going to use a short javascript code that we can use to set the URL for both Iframes with a single hyperlink. Add the following code in between your head tags:

1
2
3
4
5
6
7

<script type="text/javascript">
    function loadTwo(iframe1URL,iframe2URL) 
    { 
    parent.iframe1.location.href=iframe1URL 
    parent.iframe2.location.href=iframe2URL 
    } 
</script>

I found this script online, but for the life of me I can’t remember where I found it. If you recognize this script, let me know so that I can give proper credit.

In order for this script to work you mush change parent.iframe1.loc... and parent.iframe2.loc... to reflect the names you’ve given your Iframes. Replace “iframe1″ and “iframe2″ in the script with the names that you defined in the Iframe HTML.

Using the script is very easy. When you are creating a link that you want to control both Iframes, use the following code:

1

<a href="javascript:loadTwo('location1.html','location2.html')">My Link</a>

When “My Link” is clicked, it will load “location1.html” into Iframe1 and “location2.html” into Iframe2. You can have it link to internal pages or external websites.

PHP Action

We could stop there. You now have two functional Iframes that can be controlled by a single link. However, lets add a little more functionality. Currently, the first time visitors enter your website, they will always see the default pages that you listed in the “src=…” HTML of the Iframes. Any time they return or refresh, it will reload the default pages. Let’s fix this.

We are going to use PHP to tell the Iframes what to load. First, rename your document with a .php extension. If your file was called index.html, rename it to index.php. Now, insert the following function in between your head tags:

1
2
3
4
5
6
7
8
9

<?php
if (!isset($_GET['first'])) {
$first = "iframe1.html"; // Default page
$second = "iframe2.html"; // Default page
} else {
$first = $_GET['first'];
$second = $_GET['second']; 
}
?>

Now lets try and understand this function. This function uses the $_GET command. This checks the URL for the variable “first”. If it is not defined, it sets the “first” variable as “iframe1.html” and the variable “second” as “iframe2.html”. These will be the default pages of the Iframes if a visitor visits your homepage. If “first” is defined in the URL, it gets the values for the two variables from the URL. We will use these values to change the Iframe content.

Defining variables in the URL is simple. Just follow this format:

1

http://YourURL.com/index.php?first=http://www.cnn.com&second=http://www.google.com

You may be wondering why we had to set variables. Now we are going to adjust the Iframes code to read variables. Change your Iframes HTML to the following PHP function:

1
2
3
4
5
6
7

<?php 
echo"<iframe name=\"iframe1\" src=\"$first\" scrolling=\"auto\"></iframe>";
?></code></div></p>
<p>And change the second Iframe code to the following:</p>
<p><div class="code"><code><?php 
echo"<iframe name=\"iframe2\" src=\"$second\" scrolling=\"auto\"></iframe>";
?>

My Alterations

Congratulations! You now have two working Iframes that can be controlled by a single link and from the URL. If you’ve looked at the live example already, you’ll see that I made a few alterations in the basic code. Here’s the run down of what I did.

First, I altered the PHP function to only look for one variable in the URL. I didn’t plan on including external webpages in my Iframes, so I also had it append “.html” to the variable. My function looks like the following:

1
2
3
4
5
6
7
8
9

<?php
if (!isset($_GET['main'])) {
$main = "main.php"; // Default page
$side = "side.php"; // Default page
} else {
$main = $_GET['main']. '.html';
$side = $_GET['main']. 'side.html'; 
}
?>

You can see that my Iframes are calld “main” and “side”. My function only checks the URL for “main”. If it is set, it appends “.html” after it. It also sets my “side” Iframe as the same as the “main” only with “side.html” appended to it. I’ve placed all my HTML files into one folder and named them systematically. Thus if I have an HTML file called “fisheye.html”, it will always load “fisheyeside.html” into the side Iframe. This makes the URL look much nicer. Instead of the long beast above, I simply can use:

http://MyURL.com/?main=fisheye

Also, because I’ve placed all my HTML files into a singe folder, I’ve had to change the Iframe code to reflect that. My code now looks like the following:

1
2
3

<?php 
echo"<iframe name=\"tutorial\" src=\"tutorials/$main\" scrolling=\"auto\"></iframe>";
?>

Live Example

Don’t forget to check out the live example of a page I created using two Iframes. Test it out.

• First, go to http://playground.simply-basic.com. Click on the side bar links and notice how they load up in the webpage.
• Then, try out this URL: http://playground.simply-basic.com/?main=fisheymenu. Notice how the Iframes will be preloaded with different content to reflect the URL

Conclusion

So there you have it! If you’ve made it this far I hope you’ve understood the tutorial. I’ve tried to simplify it as much as possible. Even though I won’t really use the Iframes page much, it was an interesting experiment to see all three languages interact. If you use this tutorial, leave a link in the comments so I can check it out. Also, if you notice any errors or have any suggestions, do the same.