如何動態(tài)改變框架的大小
解決思路：
在框架所加載頁中用parent.frames["框架名"].cols="值1,值2..." 或者parent.frames["框架名"].rows="值1,值2..."來動態(tài)設置框架大小。
具體步驟：
1．直接隱藏或顯示。
(1).框架頁代碼。
<frameset cols="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">
</frameset>
或者
<frameset rows="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">
</frameset>
(2).demo.htm頁的代碼。
<button onClick="parent.frames[’frame1’].cols=’0,*’">隱藏左框架</button>
<button onClick="parent.frames[’frame1’].cols=’100,*’">顯示左框架</button>
或者
<button onClick="parent.frames[’frame1’].rows=’0,*’">隱藏上框架</button>
<button onClick="parent.frames[’frame1’].rows=’100,*’">顯示上框架</button>
2.勻速改變框架尺寸。
(1)框架頁代碼。
<frameset cols="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">
</frameset>
(2)demo.htm頁代碼。
<script>
//step為框架尺寸改變的速度步長
//flag為判斷當前狀態(tài)是顯示(1)還是隱藏(-1)
var obj,w,step=3,flag=-1
function showHideFrame(b){
obj=parent.frames[’frame1’] //目標框架對象
w=parseInt(obj.cols.split(",")[0])
/*目標框架對象的當前寬度，本例中obj.cols取得的值為"100,*"(顯示狀態(tài)時為"0,*")，obj.cols.split(",")把obj.cols以","為標志分組，得到數(shù)組["100","*"]，obj.cols.split(",")[0]取到數(shù)組的第一個元素100，然后用parseInt(obj.cols.split(",")[0])轉(zhuǎn)化為整數(shù)*/
flag=b //根據(jù)參數(shù)值b，設置顯示隱藏狀態(tài)
resize() //調(diào)用resize()函數(shù)
}
function resize(){
//調(diào)整目標框架對象寬度值，如果flag為1即顯示框架時w不斷變大，
//反之不斷變小
w+=step*flag
if((flag==-1&&w>0)||(flag==1&&w<100)){
//隱藏狀態(tài)并且w大于0或者顯示狀態(tài)并且w<100，執(zhí)行下面的代碼
obj.cols=w+",*" //重設框架寬度
setTimeout("resize()",10) //10毫秒后再次執(zhí)行resize()函數(shù)
}
}
</script>
<button onClick="showHideFrame(-1)">隱藏左框架</button>
<button onClick="showHideFrame(1)">顯示左框架</button>
代碼運行效果：
圖1.6.1 第3步的代碼運行效果
圖1.6.2 單擊【隱藏左框架】時的效果(左框架正在縮小)
3.對于內(nèi)嵌浮動框架iframe，它的屬性必須使用前綴 document.all ，或者以document.getElementsByName("框架名")和document.getElementById("框架名")這三種方式訪問。
(1)捕獲iframe對象的三種方法演示。
<iframe name="demo" src="about:blank" width="300"></iframe><br>
<button onClick="document.all.demo.style.display=’inline’">
show</button>
<button onClick="document.getElementsByName(’demo’)[0].style.display=’inline’">show</button>
<button onClick="document.getElementById(’demo’).style.display=’inline’">show</button>
<button onClick="document.all.demo.style.display=’none’">hide</button>
<button onClick="document.getElementsByName(’demo’)[0].style.display=’none’">hide</button>
<button onClick="document.getElementById(’demo’).style.display=’none’">hide</button>
代碼運行效果：
圖1.6.3捕獲iframe對象的三種方法演示
(2)或者把它放到一個元素中，然后控制該元素的顯示或隱藏。
<span id="demo"><iframe src="index.asp" name="frame1">
</iframe></span><br>
<button onClick="demo.style.display=’none’">hide</button>
<button onClick="demo.style.display=’inline’">show</button>
(3)通過設置CSS屬性clip，實現(xiàn)的勻速顯示與隱藏效果。
<script>
var step=0
function resize(flag){
step+=5*flag
document.all.demo.style.clip="rect(0 "+step+"% "+step+"% 0)"
if(flag==1)
if(step<100) setTimeout("resize(1)",10)
if(flag==-1)
if(step>0) setTimeout("resize(-1)",10)
}
</script>
<button onClick="resize(1)">show</button>
<button onClick="resize(-1)">hide</button><br>
<iframe name="demo" style="position:absolute"></iframe>
代碼運行效果：
圖1.6.4 iframe的勻速顯示與隱藏演示
圖1.6.5 單擊【hide】按鈕時的效果
注意：使用腳本控制iframe的clip屬性前必須要設置iframe的position屬性為absolute。
試一試：讀者可以試著用iframe的width和height屬性控制它的隱藏與顯示。
特別提示 1.第3步的代碼運行效果如圖1.6.1所示，圖1.6.2為單擊【隱藏左框架】時的效果(左框架正在縮小)。
2.三種捕獲iframe對象的方法演示效果見圖1.6.3。
3.圖1.6.4為第4步中(3)的代碼運行效果，單擊圖1.6.4中的 【hide】 按鈕后iframe逐漸被全部剪切，效果如圖1.6.5所示。
特別說明
本例所涉及的知識點比較多，歸納起來主要是frameset的cols和rows屬性獲取、iframe對象的捕獲和clip屬性的應用。
document.all 返回對象所包含的元素集合的引用。
document.frames(parent.frames,top.frames) 獲取給定文檔定義或與給定窗口關(guān)聯(lián)的文檔定義的所有 window 對象的集合。
document.getElementById 獲取對 ID 標簽屬性為指定值的第一個對象的引用。
document.getElementsByName 根據(jù) NAME 標簽屬性的值獲取對象的集合。
