(一)在框架中共享函數
一種常用的框架佈局使用一個固定的導航框架,顯示不同頁面的內容框架。同樣,將對外部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