2025-05-17

(一)在框架中共享函數
      一種常用的框架佈局使用一個固定的導航框架,顯示不同頁面的內容框架。同樣,將對外部JavaScript文件的調用放在總是顯示的頁面(框架集頁面)中是有意義的,這樣就不必在每個可能顯示的頁面中都重復包含這個調用。
      下面的示例使用的功能讓許多頁面共享一個函數,這個函數返回一個隨機的廣告條圖像。
frameset.html
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Using a frameset's functions from a frame</title> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<frameset cols="30%,70%"> 
    <frame src="left.html" name="left" id="left"/> 
    <frame src="framea.html" name="content" id="content" /> 
</frameset> 
</html> 
script.js腳本將頁面加載進框架集
 
[javascript]
var bannerArray=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.length;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()*bannerArray.length); 
     
    contentWin.getElementById("adBanner").src=bannerArray[randomNum]; 

 
function resetBanner(){ 
    setTimeout(setBanner,1000); 

resetBanner函數等待內容框架加載新頁面,在此後它調用setBanner()來重新設置廣告條。如果不這麼做,而是直接調用setBanner(),那麼新的內容頁面可能還沒有加載,在這種情況下,就會遇到問題:要麼是出現錯誤(因沒找到adBanner),要麼是重新設置瞭舊的adBanner——未被加載頁面上的adBanner.
註意:resetBanner不返回false,這意味著瀏覽器不但執行這裡的操作,而且會從href加載頁面,這個腳本需要瀏覽器從href加載頁面,這就是同時設置onclick處理程序和target的原因。
 
left.html
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Nav Bar</title> 
</head> 
<body bgcolor="#FFFFFF"> 
    <h1>Navigation Bar</h1> 
    <h2> 
    <a href="framea.html">Page 1</a><br /> 
    <a href="frameb.html">Page 2</a><br /> 
    <a href="framec.html">Page 3</a> 
    </h2>  
</body> 
</html> 
framea.html
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Must be in a frame</title> 
</head> 
<body bgcolor="#FFFFFF"> 
    <p align="center"> 
        Today's Featured site:<br /> 
        <img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /> 
    </p> 
    <h1>You are now looking at page 1</h1>  
</body> 
</html> 

frameb.html
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Must be in a frame</title> 
</head> 
<body bgcolor="#FFFFFF"> 
    <p align="center"> 
        Today's Featured site:<br /> 
        <img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /> 
    </p> 
    <h1>You are now looking at page 2</h1>  
</body> 
</html> 

framec.html
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Must be in a frame</title> 
</head> 
<body bgcolor="#FFFFFF"> 
    <p align="center"> 
        Today's Featured site:<br /> 
        <img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /> 
    </p> 
    <h1>You are now looking at page 3</h1>  
</body> 
</html> 
 
把以上所有文件放在同一個文件夾。
(二)用JavaScript加載iframe
     當然不一定非用JavaScript寫入iframe的內容,可能希望加載其他HTML頁面。
 建立iframe的主頁面,一個提供iframe初始內容的頁面,另外還有三個簡單的HTML頁面,下面給出把它們加載進iframe的腳本:
[javascript]
window.onload=initFrame; 
 
function initFrame(){ 
    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; 

target設置為"content",onclick處理程序設置為setiFrame函數,點擊鏈接就會觸發setiFrame()函數,這個函數將新頁面加載進iframe。 

摘自  Yanghai 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *