Previous Page
Next Page

Storing Information in Frames

In situations similar to that in the previous example, you can also keep track of useful information across frames, by storing the variables in the frameset page. Figure 5.11 shows how many times a user has visited each content page this session. One of the three (almost identical) content frames is shown in Script 5.13. Once again, the script is called from the frameset page, and the external JavaScript script is shown in Script 5.14.

Figure 5.11. The JavaScript says that you have viewed page 2 four times in this session.

[View full size image]


Script 5.13. The contents of the <span> will be replaced by JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Content frame</title>
<body bgcolor="#FFFFFF">
     <h1>You are now looking at page 1.</h1>
     <h2>You have been to this page <span id="pageCt"> </span> times.</h2>
</body>
</html>

Script 5.14. The value of the <span> with the id pageCt will be set with this script.

[View full width]
var pageCount = new Array(0,0,0);
var pageArray = new Array("frame7a.html", "frame7b.html","frame7c.html");

window.onload = initFrames;

function initFrames() {
     var leftWin = document.getElementById ("left").contentWindow.document;

     for (var i=0; i<leftWin.links.length; i++) {
        leftWin.links[i].onclick = resetPageCt;
        leftWin.links[i].thisPage = i;
     }

     bumpPageCt(0);
}

function bumpPageCt(currPage) {
     pageCount[currPage]++;

     var contentWin = document.getElementById ("content").contentWindow.document;
     contentWin.getElementById("pageCt"). innerHTML = pageCount[currPage] + " ";
}
function resetPageCt() {
     document.getElementById("content"). contentWindow.location.href = pageArray[this.
thisPage];

     setTimeout("bumpPageCt("+this.thisPage+") ",1000);
     return false;
}

To keep a count of page visits:

1. 
<h2>You have been to this page <span id="pageCt"> </span> times.</h2>



Script 5.13 has a <span> with an id. There's apparently nothing inside the <span>, but we can reset it via JavaScript. Really, there's a blank space inside it because some browsers see that this span is empty and don't create itsomething has to go in there for it to end up as part of the document.

2. 
var pageCount = new Array(0,0,0);
var pageArray = new Array ("frame7a.html","frame7b.html", "frame7c.html");



Beginning Script 5.14, we declare two arrays and set their initial contents.

3. 
for (var i=0; i<leftWin.links.length; i++) {
  leftWin.links[i].onclick = resetPageCt;
  leftWin.links[i].thisPage = i;



The initFrames() function starts off like it did in the previous task, but it sets the onclick handler to resetPageCt and the new thisPage property to iso thisPage (based on the link) will be 0, 1, or 2 (numbering starts at 0).

4. 
bumpPageCt(0);



The function ends by calling bumpPageCt and passing it a zero (so as to bump up the count for page 1).

5. 
function bumpPageCt(currPage) {
  pageCount[currPage]++;

  var contentWin = document.getElementById("content"). contentWindow.document;
  contentWin.getElementById ("pageCt").innerHTML = pageCount[currPage] + " ";
}

The bumpPageCt() function takes in a page and increments the counter for that page (saved in the pageCount array). Again, we get contentWin (that is, the framed main content document). We then use that to set the innerHTML value of pageCt to the current page count, causing it to display on the page.

6. 
function resetPageCt() {
  document.getElementById("content"). contentWindow.location.href = pageArray[this.thisPage];

  setTimeout("bumpPageCt("+this. thisPage+")",1000);
  return false;
}



The resetPageCt() function is a cross between the previously seen resetBanner() and bumpPageCt() functions plus a little more. Instead of letting the browser change the content window on its own, here, we reset it based on the pageArray array. Once the content page has changed, we want to call the bumpPageCt() function after the content page has finished loading, so once again, we use setTimeout(). And finally, we return false, because JavaScript is handling the page loading by itself.


Previous Page
Next Page