Previous Page
Next Page

Loading Iframes with JavaScript

Of course, you don't have to write into the contents of an iframe with JavaScript; chances are you'll want to load other HTML pages. This example shows you how. Once again, we'll have a main page that sets up the iframe and will be virtually identical to Script 5.16. Similarly, there is a page with the initial content of the iframe, like Script 5.17. There are also three other simple HTML pages (not shown) that we load into the iframe with Script 5.19.

Script 5.19. This script loads HTML pages into the content iframe.

window.onload = initiFrame;
function initiFrame() {
     for (var i=0; i<document.links.length; i++) {
        document.links[i].target = "content";
        document.links[i].onclick = setiFrame;
     }

}

function setiFrame() {
     document.getElementById("content"). contentWindow.document.location.href = this.href;
     return false;
}

To load an iframe with JavaScript:

1. 
function setiFrame() {
  document.getElementById ("content").contentWindow. document.location.href = this.href;
  return false;
}



In much the same way that Script 5.12 set both the target and the onclick handler for the links, Script 5.19 does the same for an iframe. In this example, clicking any of the links triggers the setiFrame() function, which then loads the new page into the iframe, as shown in Figure 5.16.

Figure 5.16. The content iframe gets loaded when you click a link in the navigation bar.

[View full size image]


 


Previous Page
Next Page