Iframe Usage

This is where members can submit tutorials that they have created on any computing related subject.
Post Reply
User avatar
Aiden
Administrator
Posts: 1080
Joined: Tue Oct 31, 2006 11:11 pm
Location: /usr/bin/perl

Iframe Usage

Post by Aiden » Fri Mar 09, 2007 9:12 pm

Drusepth
7:33 AM, March 7, 2007
Using Iframes Effectively
http://www.drusepth.digdeeperglobal.co. ... frames.txt

I. Introduction
As you may (or may not) have seen around various sites,
iframes are inline frames that allow an embedded frame inside
your page. These are powerful tools if used correctly. I have
seen a lot of sites using them incorrectly, and have answered
a lot of simple questions in the near past, so I decided to write
this guide. Anyone can redistribute this guide if it helped, as
long as no undocumented changes are made and my name remains.
ShoutOuts: Thanks to Life and Prism for correcting my
stupidity on some of my javascript.

II. Example Uses
Iframes have a lot of purposes. For example on my site, I
use a small iframe with my affiliate buttons in the sidebar, thus
allowing me to quickly add or remove buttons by editing one page
instead of every page with a sidebar. In the past, I've also
used iframes to contain my entire sidebar (for changing the content
offered easily) and for the main page (so I could keep everything
loaded, and then new links would just open in the browser. You can
use iframes for almost anything you can think of. For example, say
you want to have a 'next' button, and when it's clicked, it redirects
the iframe to the next page in the series? Or perhaps you want to
have a textbox, and be able to type in a page which redirects the
iframe to the entered page name. Maybe you have a travel site, and
want a preview iframe to load with more information when you click
on a picture. These are all possible with simple javascript scripts.

III. Syntax
When you are using iframes, I have one thing to say. Don't
forget to close it. When I first started using them, I always
forgot to close them and they ate up half my page. But here are
all the attributes you can use:

Code: Select all

<iframe
  name="name"  (assigns a name to be called upon by other objects)
  height=xxx  (the height of the iframe)
  width=xx%  (the width of the iframe)
  src=http://www.pageyouwanttoload.onstartup.com
  align="left" (aligns the iframe with text)
  frameborder=0  (border of the frame, default is 1)
  marginwidth=5  (the horizontal margin of the iframe)
  marginheight=5  (the vertical margin of the iframe)
  scrolling="no" (yes or no, lets you scroll)
> </iframe>  
IV. Using Iframes With Other Objects
You can use <a> tags to manipulate your iframes. To do
this, you just add 'target="nameofiframe"' inside your <a> tag.
You can also manipulate other iframes from inside an iframe if
you wish to do so by making the links target the other iframe.
If you know of other sites that use iframes, you can open their
site in your own iframe, and manipulate their iframe with your
own links. One other thing I use iframes for sometimes is to
place one on each of my pages that loads a blank page with a
hit counter on it. This will keep track of the total hits my
site gets, instead of the usual hitcounters that keep track of
the views of each individual page.

V. JavaScript with Iframes
The majority of effective iframes use javascript. I figure
the best way to show you how javascript is used with iframes is
to just show you some examples, and hopefully you'll be able to
be creative and think of new things. For my first example, I
will demonstrate a 'Next' button for a walkthrough through a site.
To see this in action, you can see my online example at
http://www.drusepth.digdeeperglobal.co. ... utton.html .
The Javascript used here redirects the iframe to page1.html, and
then to page2.html, and so on. It just increments the number each
time. The code used here, in a Next button setting, looks like:

Code: Select all

	<html>
		<head>
		<script language="JavaScript"><!--
			function nextPage(page) {	
				if (i < 4) { //Makes sure they only open 4 pages
					i = i + 1 //Increase i by 1
					ifram.location = "page"+i+".html" //Redirect iframe 
				}
				else { //If they are on page 4:
					alert('Thats all the pages.')
				} 
			}
			function prevPage(page) {
				if (i > 1) { //Makes sure they only open 4 pages
					i = i - 1 //Decrease the variable i by 1
					ifram.location = "page"+i+".html" //Redirects the iframe with the new i
				}
				else { //If they are
					alert('Thats all the pages.')
				}	
			}
		--></script>
		</head>
		<body onload="i=1"> //Set variable i to 1 when the page loads
		<center>
		<input type="button" value="Previous Page" onclick=prevPage(i)> //Previous Page
		<input type="button" value="Next Page" onclick=nextPage(i)> //Next Page
		<hr>
		<iframe width="70%" height="60%" src="page1.html" name="ifram"></iframe>
		</body>
	</html>
The comments provide a detailed enough description as to why
this works. If you have any questions, just ask. For my second
example, I'm going to show you a travelsite sidebar. When you
click on the link for a location, you will get a picture preview
of the location in one iframe, and information about the place
in the lower iframe. Again, the code is pretty much self-
explanitory, so here it goes:

Code: Select all

	<html>

		<head>

		<script language="JavaScript"><!--

			function getInfo(place) {

				switch (place) {

				  	case 'hawaii':

   						picture.location=('hawaii.png')

   						info.location=('infhawaii.html')

   						break;

  					case 'japan':

   						picture.location=('japan.png')

   						info.location=('infjapan.html')

   						break;

  					case 'america':

   						picture.location=('america.png')

   						info.location=('infamerica.html')

						break;

  					case 'norseland':

   						picture.location=('norseland.png')

   						info.location=('infnorseland.html')

   						break;

  					default:

   						break;

 				}

			}
			//Note: This script could also be done shorter with the following code:
			// picture.location=(place+".png")
			// info.location=(place+".html")
			//Mucho penqueno, eh?

		--></script>

		</head>

		<body>
		<table border=1><tr><td width=100>

			<iframe width="100" height="100" name="picture" scrolling="no" frameborder=0></iframe><br><br>

			Please choose a location:<br><font color="blue"><u>
			<a onClick='getInfo("hawaii")'>Hawaii</a><br>
			<a onClick='getInfo("japan")'>Japan</a><br>
			<a onClick='getInfo("america")'>America</a><br>
			<a onClick='getInfo("norseland")'>Norseland</a><br>
			<iframe width="100" height="100" name="info" frameborder=0></iframe><br>
		</td></tr></table>
		</body>

	</html>
You can see this code in action also at
http://www.drusepth.digdeeperglobal.co. ... sites.html .

VI. Preventing your site from being opened in a frame
Some people choose to not allow their sites to be opened
in other site's frames, for fear of security, or sometimes
plagiarism. There are scripts you can add to your pages that
will prevent them from being opened in an iframe. As the first
of the scripts, this script basically just replaces your page
with a blank page when it is opened in a frame:

Code: Select all

   <script language="JavaScript">
    if (parent.frames.length > 0) {
    location.href = "about:blank"; }
   </script>
Simple enough, huh? Let's say you want to replace the parent
page (the other person's page that tries to open your page) with
your own page.

Code: Select all

   <script language="JavaScript">
    if (parent.frames.length > 0) {
    parent.location.href = location.href; }
   </script>
There are plenty of ways to write these scripts. Here's another:

Code: Select all

   <script language="JavaScript">
   if (top.location != self.location) { //Top is another word for parent 
   top.location.replace(self.location) //Self is the page with the script on it
   }
   </script>
This isn't a javascript guide, so I won't go into detail as to
why these work, but it seems pretty straightforward to me.
One last thing, is if you want to replace your page with a page
you made that says something along the lines of "This person is
trying to steal my content":

Code: Select all

   <script language="JavaScript">
    if (parent.frames.length > 0) {
    location.href = "plagiarism.html"; }
   </script>
VII. Conclusion
Thanks for reading my guide on iframes. In the future, my
site may move elsewhere. If this happens, first try replacing
".co.uk" with ".net", but if that doesn't work, you'll have to
email me to ask where I'm residing currently.

Drusepth
drusepth@gmail.com

Edit on 08/27/09: Added code tags
"When it takes forever to learn all the rules, no time is left for breaking them."

User avatar
B-Con
Challenge Winner [1x]
Posts: 2679
Joined: Thu Apr 22, 2004 4:19 pm
Location: UC Davis
Contact:

Post by B-Con » Sat Mar 10, 2007 9:38 pm

I removed the [ quote ] tags to make it easier to read. The fact that you put a link to your original article at the top is sufficient.
- "Cryptographically secure linear feedback shift register based stream ciphers" -- a phrase that'll get any party started.

- Why know the ordinary when you can understand the extraordinary?

Post Reply