JavaScript筆記之框架

（一）在框架中共享函数
      一种常用的框架布局使用一个固定的导航框架，显示不同页面的内容框架。同样，将对外部JavaScript文件的调用放在总是显示的页面（框架集页面）中是有意义的，这样就不必在每个可能显示的页面中都重复包含这个调用。
      下面的示例使用的功能让许多页面共享一个函数，这个函数返回一个随机的广告条图像。
frameset.html
[html]
 

 
     
     
 
 
     
     
 
 
script.js脚本将页面加载进框架集
 
[javascript]
var JavaScript筆記之框架Array=new Array("images/redBanner.gif","images/greenBanner.gif" ,"images/blueBanner.gif"); 
 
window.onload=initFrames; 
 
function initFrames(){ 
    var leftWin=document.getElementById("left").contentWindow.document; 
    for(var i=0;i        leftWin.links[i].target="content"; 
        leftWin.links[i].onclick=resetBanner; 
    } 
    setBanner(); 
} 
 
function setBanner(){ 
    var contentWin=document.getElementById("content").contentWindow.document; 
    var randomNum=Math.floor(Math.random()*JavaScript筆記之框架Array.length); 
     
    contentWin.getElementById("adBanner").src=JavaScript筆記之框架Array[randomNum]; 
} 
 
function resetBanner(){ 
    setTimeout(setBanner,1000); 
} 
resetBanner函数等待内容框架加载新页面，在此后它调用setBanner()来重新设置广告条。如果不这么做，而是直接调用setBanner（），那么新的内容页面可能还没有加载，在这种情况下，就会遇到问题：要么是出现错误（因没找到adBanner）,要么是重新设置了旧的adBanner——未被加载页面上的adBanner.
注意：resetBanner不返回false，这意味着浏览器不但执行这里的操作，而且会从href加载页面，这个脚本需要浏览器从href加载页面，这就是同时设置onclick处理程序和target的原因。
 
left.html
[html]
nbsp;
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
     
 
 
   

Navigation Bar

 
   

 
               

  
 
 
framea.html
[html]
 
 
     
 
 
   

 
        Today's Featured site:
 
         
   

 
   

您現在正在查看第1 頁

  
身體> 
 

frameb.html
[html]
 
; 
   

 
頭> 
 網址：
; 
        /> h1>您現在正在查看第2 頁  
身體> 
 

framec.html
[html]
 ; 

   

 
頭> 
 br />; 
        /> 
  現在正在查看第3 頁  
身體> 
 
 
把以上所有檔案放在同一個資料夾中。
（二）用JavaScript載入iframe
    當然不一定非用JavaScript載入iframe的內容，可能希望載入其他HTML頁面。
 創建了iframe的主頁，提供了一個iframe初始內容的頁面，另外還有三個簡單的HTML頁面，下面給出了將它們加載進iframe的腳本：
[javascript]
window.onload=initFrame; 
 
function initFrame(){ 
    for(var i=0;i         
 收到設定為“content”，onclick處理程序設定為setiFrame函數，點擊連結就會觸發setiFrame()函數，這個函數將新載入頁面進入iframe。