如何用js控制frame的隱藏或顯示的解決辦法
index.htm
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>frame框架的顯示隱藏操作 - 51windows.net</title>
</head>
<frameset name="full" rows="64,*,64">
<frame name="top" scrolling="no" xnoresize target="contents" src="top.htm">
<frameset cols="25%,*" name="cen">
<frame name="contents" target="main" src="left.htm">
<frame name="main" src="main.htm">
</frameset>
<frame name="bottom" scrolling="no" xnoresize target="contents" src="bottom.htm">
<noframes>
<body>
<p>此網(wǎng)頁使用了框架,但您的瀏覽器不支持框架。</p>
</body>
</noframes>
</frameset>
</html>
main.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>main - 51windows.net</title>
</head>
<body>
<SCRIPT LANGUAGE="javascript">
<!--
function shtop(){
if (parent.full.rows.indexOf("0,*,")!=-1){
parent.full.rows="64,*,"+parent.full.rows.split(",")[2]
document.getElementById("shtop").value="隱藏上部";
}
else{
parent.full.rows="0,*,"+parent.full.rows.split(",")[2]
document.getElementById("shtop").value="顯示上部";
}
}
function shleft(){
if (parent.cen.cols=="0,*"){
parent.cen.cols="25%,*,"
document.getElementById("shleft").value="隱藏左部";
}
else{
parent.cen.cols="0,*"
document.getElementById("shleft").value="顯示左部";
}
}
function shbottom(){
if (parent.full.rows.indexOf(",*,0")!=-1){
parent.full.rows=parent.full.rows.split(",")[0]+",*,64"
document.getElementById("shbottom").value="隱藏下部";
}
else{
parent.full.rows=parent.full.rows.split(",")[0]+",*,0"
document.getElementById("shbottom").value="顯示下部";
}
}
function maxmain(){
if (parent.full.rows=="0,*,0"){
parent.full.rows="64,*,64"
parent.cen.cols="25%,*"
document.getElementById("maxmain").value="隱藏左上下";
document.getElementById("shtop").value="隱藏上部";
document.getElementById("shleft").value="隱藏左部";
document.getElementById("shbottom").value="隱藏下部";
}
else{
parent.full.rows="0,*,0";
parent.cen.cols="0,*";
document.getElementById("maxmain").value="顯示左上下";
document.getElementById("shtop").value="顯示上部";
document.getElementById("shleft").value="顯示左部";
document.getElementById("shbottom").value="顯示下部";
}
}
//-->
</SCRIPT>
<input type="button" name="maxmain" id="maxmain" onclick="maxmain();" value="隱藏左上下">
<input type="button" name="shtop" id="shtop" onclick="shtop();" value="隱藏上部">
<input type="button" name="shleft" id="shleft" onclick="shleft();" value="隱藏左部">
<input type="button" name="shbottom" id="shbottom" onclick="shbottom();" value="隱藏下部">
</body>
</html>
框架的嵌套:
<html>
<head>
</head>
<body>
<iframe width=468 height=60 src=abc.aspx></iframe>
<iframe width=468 height=60 src=cde.aspx></iframe>
</body>
</html>
#################################################
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>無標(biāo)題文檔</title>
</head>
<frameset rows="77,181" cols="*" framespacing="0" border="0">
<frame src="abc.aspx">
<frame src="cde.aspx">
</frameset>
<noframes><body>
</body></noframes>
</html>
//*****************說明************************:
frameset是框架,一個(gè)網(wǎng)頁被劃分成幾個(gè)塊, 每個(gè)塊為不同的網(wǎng)頁文件。iframe是內(nèi)嵌網(wǎng)頁,可以被嵌在一個(gè)頁頁的任何地方。一般iframe使用靈活些。
當(dāng)使用框架時(shí)頁面中不應(yīng)該有body標(biāo)簽。
frameset標(biāo)簽是成對出現(xiàn)的,以<frameset>開始,</frameset>結(jié)束,里面用frame。
frameset里面還能嵌入frameset。嵌套框架,框架可以進(jìn)行多層嵌套。
frameset里面的id,為了方便后面用Javascript來訪問這個(gè)對象.
如下:
<frameset rows="58,*" frameborder="NO" border="0" framespacing="0">
<frame src="top.htm" name="topFrame" scrolling="NO" noresize ><!--頁頭-->
<frameset rows="*,20" cols="*" framespacing="0" frameborder="NO" border="0">
<frameset rows="*" cols="120,15,*" framespacing="0" frameborder="NO" border="0" id="leftFrameSet">
<frame src="menu.htm" name="leftFrame" scrolling="NO" noresize><!--菜單-->
<frame src="mid.htm" name="midFrame" scrolling="NO" noresize><!--菜單收縮條-->
<frameset rows="35,*" framespacing="0" frameborder="NO" border="0">
<frame src="navi.htm" name="righttop" scrolling="NO" noresize><!--導(dǎo)航-->
<frameset cols="*,200" framespacing="0" frameborder="NO" border="0">
<frame src="" name="mainFrame">
<frame src="" name="rightFrame" scrolling="NO">
</frameset>
</frameset>
</frameset>
<frame src="bottom.htm" name="bottomFrame" scrolling="NO" noresize><!--頁尾-->
</frameset>
</frameset>
常用框架structure:
HTML語言剖析-frameset <FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>
■ 框架概念 :
所謂框架便是網(wǎng)頁畫面分成幾個(gè)框窗,同時(shí)取得多個(gè) URL。只 要 <FRAMESET> <FRAME> 即可,而所有框架標(biāo)記 要放在一個(gè)總起的 html 檔,這個(gè)檔案只記錄了該框架 如何劃分,不會(huì)顯示任何資料,所以不必放入 <BODY> 標(biāo)記,瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。<FRAMESET> 是用以劃分框窗,每一框窗由一個(gè) <FRAME> 標(biāo) 記所標(biāo)示,<FRAME>必須在 <FRAMESET> 范圍中使用。如下例:
<frameset cols="50%,*">
<frame name="hello" src="/up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <FRAMESET> 把畫面分成左右兩相等部分,左便是顯示 up2u.html,右邊則會(huì)顯示 me2.html 這檔案,<FRAME> 標(biāo)記所標(biāo)示的框窗永遠(yuǎn)是按由上而下、由左至右的次序。
本節(jié)與 Composer 教室的【運(yùn)用框架】大部分相同,只是本節(jié)增加了內(nèi)容及較為詳細(xì),正 如其它篇章一樣并不會(huì)提及網(wǎng)頁制作工具,若饋下學(xué)會(huì)了 HTML 相信你亦不會(huì)選用 Composer , FrontPage 一類的工具了。
■ <FRAMESET> <FRAME> : ▲Top
<FRAMESET> 稱框架標(biāo)記,用以宣告HTML文件為框架模式,并設(shè)定視窗如何分割。
<FRAME> 則只是設(shè)定某一個(gè)框窗內(nèi)的參數(shù)屬性。
<FRAMESET> 參數(shù)設(shè)定:
例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
COLS="90,*"
垂直切割畫面(如分左右兩個(gè)畫面),接受整數(shù)值、百分?jǐn)?shù), * 則代表占用馀下空 間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號分隔。例如 COLS="30,*,50%" 可以 切成三個(gè)視窗,第一個(gè)視窗是 30 pixels 的寬度,為一絕對分割,第二個(gè)視窗是當(dāng) 分配完第一及第三個(gè)視窗後剩下的空間,第三個(gè)視窗則占整個(gè)畫面的 50% 寬度 為 一相對分割。您可自己調(diào)整數(shù)字。
ROWS="120,*"
就是橫向切割,將畫面上下分開,數(shù)值設(shè)定同上。唯 COLS 與 ROWS 兩參數(shù)盡量 不要同在一個(gè) <FRAMESET> 標(biāo)記中,因 Netacape 偶然不能顯示這類形的框架,盡 采用多重分割。
frameborder="0"
設(shè)定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
border="0"
設(shè)定框架的邊框厚度,以 pixels 為單位。
bordercolor="#008000"
設(shè)定框架的邊框顏色。
framespacing="5"
表示框架與框架間的保留空白的距離。
<FRAME> 參數(shù)設(shè)定:
例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
SRC="a.html"
設(shè)定此框窗中要顯示的網(wǎng)頁檔案名稱,每個(gè)框窗一定要對應(yīng)著一個(gè)網(wǎng)頁檔案。你可 使用絕對路徑或相對路徑,有關(guān)此兩者詳見於【連結(jié)進(jìn)階】。
NAME="top"
設(shè)定這個(gè)框窗的名稱,這樣才能指定框架來作連結(jié),必須但任意命名。
frameborder=0
設(shè)定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
framespacing="6"
表示框架與框架間的保留空白的距離。
bordercolor="#008000"
設(shè)定框架的邊框顏色。顏色值請參考【HTML 剖析】。
scrolling="Auto"
設(shè)定是否要顯示卷軸,YES 表示要顯示卷軸,NO 表示無論如何都不要顯示, AUTO是視情況顯示。
noresize
設(shè)定不讓使用者可以改變這個(gè)框框的大小,亦沒有設(shè)定此參數(shù),使用者可以很隨 意地拉動(dòng)框架,改變其大小。
marginhight=5
表示框架高度部份邊緣所保留的空間。
marginwidth=5
表示框架寬度部份邊緣所保留的空間。
以下是一些例子:(與 Composer 教室的【運(yùn)用框架】相同)
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="/a.html">
<frame name="bottom" src="/b.html">
</frameset>
例子 HTML Code
<frameset rows="80,*,80">
<frame name="top" src="/a.html">
<frame name="middle" src="/b.html">
<frame name="bottom" src="/c.html">
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="/a.html">
<frame name="lower_left" src="/b.html">
</frameset>
<frame name="right" src="/c.html">
</frameset>
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="/a.html">
<frameset cols="150,*">
<frame name="lower_left" src="/b.html">
<frame name="lower_right" src="/c.html">
</frameset>
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frame name="left" src="/a.html">
<frameset rows="80,*">
<frame name="upper_right" src="/b.html">
<frame name="lower_right" src="/c.html">
</frameset>
</frameset>
■ <NOFRAMES> : ▲Top
當(dāng)別人使用的瀏覽器太舊,不支援框架這個(gè)功能時(shí),他看到的將會(huì)是一片空白。為了避免 這種情況,可使用 <NOFRAMES> 這個(gè)標(biāo)記,當(dāng)使用者的瀏覽器看不到框架時(shí),他就會(huì)看 到 <NOFRAMES> 與 </NOFRAMES> 之間的內(nèi)容,而不是一片空白。這些內(nèi)容可以是提醒 瀏覽轉(zhuǎn)用新的瀏覽器的字句,甚至是一個(gè)沒有框架的網(wǎng)頁或能自動(dòng)切換至沒有框架的版本 亦可。
應(yīng)用方法:
在<frameset> 標(biāo)記范圍加入 </NOFRAMES> 標(biāo)記,以下是一個(gè)例子:
<frameset rows="80,*">
<noframes>
<body>
很抱歉,饋下使用的瀏覽器不支援框架功能,請轉(zhuǎn)用新的瀏覽器。
</body>
</noframes>
<frame name="top" src="/a.html">
<frame name="bottom" src="/b.html">
</frameset>
若瀏覽器支援框架,那堋它不會(huì)理會(huì) <noframes> 中的東西,但若瀏覽器不支援框架,由 於不認(rèn)識所有框架標(biāo)記,不明的標(biāo)記會(huì)被略過,標(biāo)記包圍的東西便被解讀出來,所以放在 <noframes>范圍內(nèi)的文字會(huì)被顯示。
■ <IFRAME> : ▲Top
這標(biāo)記只適用於 IE。 它的作用是在一頁網(wǎng)頁中間插入一個(gè)框窗以顯示另一個(gè)文件。它是 一個(gè)圍堵標(biāo)記,但圍著的字句只有在瀏覽器不支援 iframe 標(biāo)記時(shí)才會(huì)顯示,如<noframes> 一樣,可以放些提醒字句之類。通常 iframe 配合一個(gè)辨認(rèn)瀏覽器的 Java Script 會(huì)較好,若 javascript 認(rèn)出該瀏覽器并非 Internet Explorer 便會(huì)切換至另一版本。
<iframe> 的參數(shù)設(shè)定如下:
例子:
<iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
src="iframe.html"
欲顯示於此框窗的文件來源除檔案名稱,必要加上相對或絕對路徑。
name="test"
此框窗名稱,這是連結(jié)標(biāo)記的 target 參數(shù)所 要的,
align="MIDDLE"
可選值為 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的寬及長,以 pixels 為單位。
marginwidth="1" marginheight="1"
該插入的文件與框邊所保留的空間。
frameborder="1"
使用 1 表示顯示邊框, 0 則不顯示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容許卷動(dòng)(內(nèi)定), No 則不容許卷動(dòng)。
例子: 原始碼
<center> <iframe src="http://www.dbjr.com.cn/" name="test" align="center" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1">
很抱歉,饋下使用的瀏覽器并不支援 IFrame,不能正常瀏覽我的網(wǎng)頁。</iframe>
</center>
顯示結(jié)果
多數(shù)論壇用的左右的frame代碼--index.htm如何獲得 frame 的 src 的值~~使用JavaScript實(shí)現(xiàn)訪問本站點(diǎn)任何頁面都加載Frame的一種實(shí)現(xiàn)方式網(wǎng)頁中框架的動(dòng)態(tài)拉動(dòng)的控制javascript如何操作框架頁中的域中圖法簡表HTML---Frame分欄的javascript代碼
- js設(shè)置控件的隱藏與顯示的兩種方法
- jquery和js實(shí)現(xiàn)對div的隱藏和顯示方法
- js菜單點(diǎn)擊顯示或隱藏效果的簡單實(shí)例
- js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
- AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- vueJS簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】
- js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層
- javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果
- 原生js實(shí)現(xiàn)密碼輸入框值的顯示隱藏
相關(guān)文章
javascript trim 去空格函數(shù)實(shí)現(xiàn)代碼
去除字符串左右兩端的空格,在vbscript里面可以輕松地使用 trim、ltrim 或 rtrim,但在js中卻沒有這3個(gè)內(nèi)置方法,需要手工編寫。下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式,效率不錯(cuò),并把這三個(gè)方法加入String對象的內(nèi)置方法中去。2008-10-10jQuery EasyUI window窗口使用實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery EasyUI window窗口使用功能,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12javascript讓setInteval里的函數(shù)參數(shù)中的this指向特定的對象
話說阿里巴巴今年的校園招聘有一道題目考了一個(gè)知識點(diǎn),那就是setInterval的參數(shù)函數(shù)里的this指向.2010-01-01JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法
這篇文章主要介紹了JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法,詳細(xì)分析了eval函數(shù)的功能及使用eval函數(shù)實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建變量的步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06bootstrap datetimepicker 日期插件在火狐下出現(xiàn)一條報(bào)錯(cuò)信息的原因分析及解決辦法
日期插件 bootstrap-datetimepicker 在火狐下出現(xiàn)一條報(bào)錯(cuò)信息:TypeError: (intermediate value).toString(…).split(…)[1] is undefined.什么原因?qū)е碌哪?,下面小編給大家分享解決思路,需要的朋友參考下2017-03-03ES6基礎(chǔ)之?dāng)?shù)組和對象的拓展實(shí)例詳解
這篇文章主要介紹了ES6基礎(chǔ)之?dāng)?shù)組和對象的拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6數(shù)組和對象拓展運(yùn)算符、拓展方法的使用及相關(guān)操作技巧,需要的朋友可以參考下2019-08-08FormValidate 表單驗(yàn)證功能代碼更新并提供下載
加入驗(yàn)證模式 4,同3,但是當(dāng)驗(yàn)證不通過時(shí),立即停止向下檢查。在模式3下,如果發(fā)生錯(cuò)誤,會(huì)把錯(cuò)誤記錄,并向下檢查,模式4就不向下檢查了2008-08-08