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.


 




JavaScript and Ajax for the Web(c) Visual QuickStart Guide
JavaScript and Ajax for the Web, Sixth Edition
ISBN: 0321430328
EAN: 2147483647
Year: 2006
Pages: 203

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net