Previous Page
Next Page

Working with Iframes

An iframe is an inline frame, that is, a frame that can be embedded within a regular HTML page instead of needing to be inside a frameset. Like a regular frame, an iframe is a separate HTML document. You can use an iframe as the target of a script, so you can create content on the fly under script control and display it in the page without having to use a frameset.

In this task, we have a regular HTML page with a content area that is an iframe. The content of the iframe is created using JavaScript. Script 5.16 creates the regular page. Script 5.17 is the placeholder HTML document that shows the user the initial content in the iframe, namely the "Please load a page" instruction, as shown in Figure 5.14. That content will be replaced by the product of Script 5.18; when the user clicks one of the links, JavaScript writes out new code to the iframe. In this case, it's displaying the name of the page and how many times the user has gone to that page in this session. As you will see, most of this script is built of pieces you've seen earlier in this chapter.

Script 5.16. This page creates the iframe and calls the external JavaScript.

[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>iframes</title>
     <script language="javascript"  type="text/javascript" src="script09. js"></script>
</head>
<body bgcolor="#FFFFFF">
     <iframe src="frame9b.html" width="550" height="300" name="content" id="content"  
align="right" frameborder="1">Your browser does not support iframes</iframe>
     <h1>Navigation Bar</h1>
     <h2>
     <a href="page1.html">Page 1</a><br />
     <a href="page2.html">Page 2</a><br />
     <a href="page3.html">Page 3</a>
     </h2>
</body>
</html>

Script 5.17. The initial page that goes in the iframe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Content frame</title>
</head>
<body bgcolor="#FFFFFF">
     Please load a page
</body>
</html>

Figure 5.14. The iframe, on the right, initially contains an instruction to click a link.

[View full size image]


Script 5.18. This script calculates the content of the iframe and writes it into the window.

var pageCount = new Array(0,0,0,0);
window.onload = initFrames;

function initFrames() {
     for (var i=0; i<document.links.length; i++) {
        document.links[i].onclick = writeContent;
        document.links[i].thisPage = i+1;
     }

}

function writeContent() {
     pageCount[this.thisPage]++;

     var newText = "<h1>You are now looking at page " + this.thisPage;
     newText += ".<br \/>You have been to this page ";
     newText += pageCount[this.thisPage] + " times.<\/h1>";

     var contentWin = document.getElementById ("content").contentWindow.document;
     contentWin.body.innerHTML = newText;
     return false;

}

To create the content for an iframe:

1. 
[View full width]
<iframe src="frame9b.html" width="550" height="300" name="content" id="content"
 align="right" frameborder="1">Your browser does not support iframes</iframe>



In Script 5.16, the iframe tag tells the browser that the initial source for the iframe's content will be found in frame9b.html. Inside the tag, there's a message that will be displayed by browsers that don't understand iframes.

2. 
function writeContent() {



Create a function called writeContent, which is used to build the content inside the iframe.

3. 
pageCount[this.thisPage]++;



This line increments the pageCount array, so that we can keep track of how many times we've visited this particular page.

4. 
var newText = "<h1>You are now looking at page " + this.thisPage;
newText += ".<br \/>You have been to this page ";
newText += pageCount[this.thisPage] + " times.<\/h1>";



These lines create what will be the content of the iframe on the fly.

5. 
var contentWin = document.getElementById("content"). contentWindow.document;
contentWin.body.innerHTML = newText;
return false;

As with previous examples, we get contentWin and reset the innerHTML property of its body. Resetting innerHTML writes the two lines of text in the iframe, and the result is shown in Figure 5.15. And because that's everything, we end with a return false so that the browser doesn't do things it shouldn't.

Figure 5.15. Each time you click a link in the navigation bar, the content in the iframe updates.

[View full size image]


Tip

  • Note that unlike previous times we've written out to a content frame from a non-frameset page, we're using document.getElementById("content") instead of parent.document.getElementById ("content"). That's because the iframe is a child of the main page, not a frameset, and consequently, we can address it directly instead of only via the parent.



Previous Page
Next Page