如何動態改變框架的大小
解決思路：
在框架所加載頁中用parent.frames["框架名"].cols="值1,值2..."?或者parent.frames["框架名"].rows="值1,值2..."來動態設置框架大小。
具體步驟：
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為判斷當前狀態是顯示(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,*"(顯示狀態時為"0,*")，obj.cols.split(",")把obj.cols以","為標志分組，得到數組["100","*"]，obj.cols.split(",")[0]取到數組的第一個元素100，然后用parseInt(obj.cols.split(",")[0])轉化為整數*/
????flag=b???????????????//根據參數值b，設置顯示隱藏狀態
????resize()?????????????//調用resize()函數
}
function?resize(){
//調整目標框架對象寬度值，如果flag為1即顯示框架時w不斷變大，
//反之不斷變小
????w+=step*flag
????if((flag==-1&&w>0)||(flag==1&&w<100)){
//隱藏狀態并且w大于0或者顯示狀態并且w<100，執行下面的代碼
???????obj.cols=w+",*"??????????????//重設框架寬度
????????setTimeout("resize()",10)?//10毫秒后再次執行resize()函數
????}
}
</script>
<button?onClick="showHideFrame(-1)">隱藏左框架</button>
<button?onClick="showHideFrame(1)">顯示左框架</button>

代碼運行效果：

圖1.6.1?第3步的代碼運行效果

圖1.6.2?單擊【隱藏左框架】時的效果(左框架正在縮小)

3.對于內嵌浮動框架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，實現的勻速顯示與隱藏效果。

<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)?獲取給定文檔定義或與給定窗口關聯的文檔定義的所有?window?對象的集合。
document.getElementById?獲取對?ID?標簽屬性為指定值的第一個對象的引用。?
document.getElementsByName?根據?NAME?標簽屬性的值獲取對象的集合。

總結

以上是生活随笔為你收集整理的如何动态改变框架的大小[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。