iframes | Still Plugging Away

Here we explore the intriguing world of imbedded frames: iframes. Topics include:

The iframe element
JavaScript processing of iframes

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 23: Inline frames

Click here for the video transcript

Hands on exercise - part 1

This exercise brings together our work with cookies and iframes. The question is: can cookie values be passed between pages in iframes?

We'll have you build three web pages. First, setValue.html, which accepts input from the user and puts the input into a cookie; the user is then encouraged to click on a link to invoke our second page, showValue.html, which will display the cookie value.

So open html_skel and add the following pieces to the body:

A <p> element: "This page prompts for a value and sets the value in a cookie"
A <p> element with an onchange event handler that
- sets into document.cookie 'passValue = '+ document.getElementById('rad').value;"
- contains the text "Enter a string up to 12 characters:"
- followed by an <input> element of type text, size 12 and an id of 'rad'
A <p> element containing an <a> element with href=showValue.html and target of calc; the text between the <a> start and end tags should be "Click here to pass the value on"
Save the file as setValue.html

Next, open html_skel again and add the following pieces:

In the <head> element, add a <script> element with src=cookies.js
In the <body> start tag add an "onload" event handler that
- Gets the value in cookie PassValue into variable 'r'
- Appends 'r' to the paragraph with id=inVal
A <p> element with the text "This page displays the value passed in the cookie"
A <p> element with id=inVal and text "Value passed is "
Save the file as showValue.html

Note: you could test this much by launching setValue.html.

Finally, open html_skel again and add

In the <head> section, add a <style> element with these entries:
- h1 {color: red; font-size: 16pt;}
- .in2 {margin-left: 2in;}
- .instr {margin-left: 6pt; width: 25%;}
- .space {margin-right: .5in;}
In the <body>, start with an <h1> element with class=in2 and text "Passing cookie values across iframes"
An <iframe> element with these attributes:
- src=setValue.html
- id=c1
- height=250
- width=350
- class=space
Another <iframe> element with these attributes:
- src=showValue.html
- name=calc
- height=250
- width=350
A <div> elememt with class=instr, including the following element:
A <p> elememt with the text:
Set value in the first frame then click the link labeled "Click here to pass the value on", to see if it's picked up in the second frame
Save the file as iframeAndCookies.html

Test this out by launching iframeAndCookies.html.

Hands on exercise - part 2

This exercise brings together our work with select and iframes. Build a select / option list with some of your sample solutions and show them in an iframe.

Here, there's just one web page to build:, iframeDisplay.html, which has a list of page names in a select list; when selected, the page is displayed in a frame.

Start by opening html_skel and add these pieces:

In the <head> section, add a <style> element with these entries:
- h1 {color: red; font-size: 16pt;}
- .in2 {margin-left: 35pt;}
In the <body> begin with an <h1> element with class in2 and content "Replacing content in an iframe from a list of pages"
An <iframe> element with these attributes:
- src=unirpt2.html
- id=show
- height=500
- width=1000
A <p> element with text 'Select one of the options below'
A <select> element with size=8 and an onclick event handler that:
- Puts the value of the selected option into "pointTo"
- Sets the 'src' attribute of the iframe from "pointTo"
Within the <select> element, a series of <option> elements with this content:
- unirpt2.html
- roomdate.html
- locs.html
- locs2.html
- textTest.html
- BordersDemo.html
- FDA.html
- map_work.html
- video.html
- scripts1.html
- scripts3.html
- FunctionDemo.html
- FDA2.html
- DTECafe-local.html
- Events2.html
- InventoryValue.html
- iframeAndCookies.html
Save this file as iframeDisplay.html

Test this out by launching iframeDisplay.html.

Note that by testing the last entry you will be testing iframes embedded in an iframe

Note also that within an iframe, there is no "back arrow": you can't go back to an earlier page in the frame unless you've built in navigation links on that page

Lesson 23: Embedding pages within pages: iframes