JavaScript and frames

Objectives

use JavaScript to keep a page out of a frame
use JavaScript to force a page into a frame
change multiple content frames with one link
use query strings to set frame contents
dynamically create a page within a frame
create dynamic content for an inline frame

Basic frames review and noframes tag

regular frames are gone from HTML 5 - but you can still use iframes
most of these notes cover traditional frames/framesets; one section at the end covers inline frames
since regular frames are going away, these notes are for legacy code
you should have used frames already, so this should be a review
the frameset element replaces the body element in an HTML document
the noframe tag goes just before the last /frameset tag
see simple frames example with noframes tag

<frameset cols="150,*"  frameborder="no">
 <frame name="nav" src="nav1.html" id="nav" />
 <frame name="content" src="page1.html" id="content" />

<noframes>
<body>
<h3>You are not seeing the real page because it requires
 frames, which your browser apparently doesn't support.</h3>
</body>
</noframes>
</frameset>

Nested frames

frames can be nested to create fairly comple designs, but this is not advised as it can get annoying very quickly
some web designers do not like using frames due to accessibility issues, but others disagree
see simple nested frames example

<frameset cols="150,*"  frameborder="no">
  <frame name="nav" src="nav1.html" id="nav" />
  <frameset rows="75,*" frameborder="no">
    <frame name="banner" src="banner.html" id="banner" />
    <frame name="content" src="page1.html" id="content" />
  </frameset>
</frameset>

Keeping a page out of a frame

a little simple JavaScript in the head element can keep your page out of a frame and force it to take over the window

if (top.location != self.location)
   top.location.replace(self.location);

go to page2 in simple nested frames example

Force a page to be in a frame

once in a while you may want to force a page into frames

if (top.location == self.location)
   top.location.replace("frame2.html");

see page that forces frames (it appears as if you have gone straight to a page with frames)

Changing multiple frames at once

see example at frames/frtest.html

frtest.html:

<html>
<head>
<title></title>
</head>
<frameset cols="80,*">
  <frame src="fnav.html" name="nav" id="nav" />
  <frameset rows="*,*">
     <frame src="fcont1.html" name="upper" id="upper" />
     <frame src="fcont1.html" name="lower" id="lower" />
  </frameset>
</frameset>
</html>

fnav.js:

function change(p1, p2) {
   parent.upper.document.location.href=p1;
   parent.lower.document.location.href=p2;
}

fnav.html:

<html>
<head>
<script src="fnav.js"></script>
</head>
<body>
<p><a href="javascript:void change('fcont1.html','fcont2.html');">1/2</a></p>
<p><a href="javascript:void change('fcont1.html','fcont1.html');">1/1</a></p>
<p><a href="javascript:void change('fcont3.html','fcont1.html');">3/1</a></p>
</body>
</html>

Intelligent frames selection

we can create a page which contains a particular page in one of the frames by default, but allows a different page if sent via the query string in the URL
we can access the query string with: self.location.search
see frames/frame3.html (use default)
see frames/frame3.html?page7.html (use page7.html)

<script>
var link = "page1.html";
if (self.location.search.length > 0) {
   link = self.location.search.substring(1,self.location.search.length);
}
document.writeln('<frameset cols="150,*" frameborder="no">');
document.writeln('  <frame name="nav" src="nav2.html" id="nav" \/>');
document.writeln('  <frameset rows="75,*" frameborder="no">');
document.writeln('    <frame name="banner" src="banner.html" id="banner" \/>');
document.writeln('    <frame name="content" id="content" src="' + link + '" \/>');
document.writeln('  <\/frameset>');
document.writeln('<\/frameset>');
</script>

given a page coded as above, you can now write content pages which force themselves into frames without forcing the user all the way back to the first frames page:
```
if (top.location == self.location)
   top.location.replace("frame3.html?page5.html");
```
see frames/page5.html (forces itself into a frame)

Dynamic page creation within a frame

you can also have a link create the content for a frame
in the example, notice that the link just calls a function (contained in the head element) which creates the content page from scratch

<head>
<script>
function createPage7() {
  parent.content.document.writeln('<html><head><title><\/title><\/head>');
  parent.content.document.writeln('<body bgcolor="green" text="silver">');
  parent.content.document.writeln('<h2 align="center">Dynamically created page content<\/h2>');
  parent.content.document.writeln('<\/body><\/html>');
  parent.content.document.close();
}
</script>
</head>
<body>
<p><a href="javascript:void createPage7();">Page 7</a></p>
</body>

see page 7 link on frames/frame3.html

Using a parent frameset to control displayed pages

you can place variables and functions in the parent and access them from the child frames
this example has a variable named ctr which keeps track of how many valid page requests were handled; it is displayed in page8.html
it also has a function which can change which page is displayed in the content frame
the names of pages available for display are stored in an array
an error message is generated if a request is made for a number beyond the bounds of the array

<script>
var page = new Array("page1.html", "page7.html", "page8.html");
var ctr = 0;
function setContent(n) {
   if (n<0 || n>=page.length) {
      self.content.document.writeln('<html><head><title><\/title><\/head>');
      self.content.document.writeln('<body><h2 align="center">Invalid page requested: ' + n + '<\/h2>');
      self.content.document.writeln('<\/body><\/html>');
      self.content.document.close();
   } else {
      self.content.document.location.href = page[n];
      ctr++;       // ctr is only used for display on page8.html
   }
}</script>

see frames/frame4.html

the code on the navigation page looks like this:

<p><a href="javascript:void parent.setContent(0);" target="content">Page 1</a></p>
<p><a href="javascript:void parent.setContent(1);" target="content">Page 7</a></p>
<p><a href="javascript:void parent.setContent(2);" target="content">Page 8</a></p>
<p><a href="javascript:void parent.setContent(3);" target="content">Out of range</a></p>

the code on page8.html which displays the variable ctr is located in the body element and looks like this:
```
<script>
document.writeln('<h3 align="center">Page requests so far: ' + parent.ctr + '<\/h3>');
</script>
```

Setting link targets using JavaScript

It is important that you be able to do this using JavaScript if you are using strict XHTML and framesets.
Example available at frames/frame6.html

Basic frameset code:

<frameset cols="150,*" frameborder="no">
  <frame name="nav" src="nav6.html" id="nav" />
  <frameset rows="75,*" frameborder="no">
    <frame name="banner" src="banner.html" id="banner" />
    <frame name="content" src="page1.html" id="content" />
  </frameset>

Navigation frame:

<html>
<head>
<title></title>
<script src="nav6.js"></script>
</head>
<body onload="initLinks();">
<p><a href="page1.html">Page 1</a></p>
<p><a href="page9.html">Page 9</a></p>
<p><a href="page10.html">Page 10</a></p>
</div>
</body>
</html>

JavaScript code (nav6.js):

window.onload = initLinks();

function initLinks() {
   for (var i=0; i<document.links.length; i++) {
      document.links[i].target="content";
   }
}

Targetting content to an inline frame

assume the name of the inline frame is frame1
this code for a link on the main page will change the content of the inline frame to page1.html:
```
<a href="javascript:void frame1.document.location.replace('page1.html');">Page 1</a>
```

we can also place a function in the head element to generate content dynamically for the inline frame:

<script>
function createPage() {
   frame1.document.writeln('<html><head><title><\/title><\/head>');
   frame1.document.writeln('<body text="black"><h3 align="center">Dynamic Content<\/h3>');
   frame1.document.writeln('<\/body><\/html>');
   frame1.document.close();
}
</script>

we can call the function like this:

<a href="javascript:void createPage();">Dynamic content</a>

see frames/frame5.html