釋成“瀏覽器中的瀏覽器“很是恰當
<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src=”move-ad.htm”></iframe>
<iframe>用于設置文本或圖形的浮動圖文框或容器。
border
<iframe border=”3″></iframe>
設定圍繞圖文框的邊緣寬度
frameboder
<iframe frameboder=”0″></iframe>
設置邊框是不否為3維(0=否,1=是)
height,width
<iframe height=”31″ width=”88″></iframe>
設質邊框的寬度和高度
scrolling
<iframe scrolling=”no”></iframe>
是否有滾動條(yes,no,auto)
src
<iframe src=”girl.gif”></iframe>
指定iframe調用的文件或圖片(html,htm,gif,jpg,jpg,png,txt,*.*)
注意事項:
一個浮動框架不需要通過<frameset>元素聲明為框架設置的一部分;
WebTV和Netscape 4.x(4.0 到 4.75)不支持浮動框架。
在HTML4.01嚴格規范中,<iframe>元素沒有被定義。浮動框架可以使用<P>元素和CSS定位方法來模仿實現。
]]>1. 獲取iframe效果,就是帶一個滾動條,可以省不少版面。
2. 要嵌一個頁面,實現框架鏈接。
如果不方便使用iframe,可以有如下相應解決方案:
1. 可以使用css布局來實現,即可以少一個頁面,也可以提高執行效率。
2. 可以采用xmlhttp遠程獲取數據。
A. 直接模擬iframe
用層做容器
#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm
用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:200px 0 0 100px;}
body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%; position:static;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm
B. 絕對定位模擬iframe
滾動條在外邊
html { overflow:hidden; border:0; height:100%;}
body { overflow:hidden; margin:0; height:100%; position:relative;}
#content { height:100%; position:relative; z-index:1; overflow:auto;}
#head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}
#foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm
滾動條在里邊
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}
#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}
#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#ccc; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm
強調一下,standard模式要把body看作是一個容器,基本和P類似,這和傳統觀念是很不一樣。搞清楚了html與body的關系,關于高級布局的很多問題自然迎刃而解。
]]><iframe>是框架的一種形式,也比較常用到。
例子1。
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
不用多說了。
width插入頁的寬;height插入頁的高;scrolling 是否顯示頁面滾動條(可選的參數為 auto、yes、no,如果省略這個參數,則默認為auto);frameborder 邊框大??;
注意:URL建議用絕對路徑
例子2。
如果一個頁面里面有框架。。隨便點頁面里的連接,要求在這個<iframe> 里打開。在iframe 中加入name=** (**自己設定)
<iframe name=** ></iframe>
然后在修改默認打開模式,:網頁HEAD中加上<a href=URL target=**>或部分連接的目標框架設為(**)
例子3。
要插入一個頁面。要求只拿中間一部分。其他的都不要。,。。
代碼:
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src=”http://www.mxio.cn/” frameborder=no scrolling=no width=776 height=2500></iframe>
控制插入頁被框架覆蓋的 marginwidth=0 marginheight=0;控制框架覆蓋上部分的 vspace=-170
scrolling滾動條要否(auto、yes、no) frameborder框架的邊框大小,width=776 height=2500此框架的大小。
一、頁面內加入iframe
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,
scrolling表示是否顯示頁面滾動條,可選的參數為auto、yes、no,如果省略這個參數,則默認為auto。
二、超鏈接指向這個嵌入的網頁,只要給這個iframe命名就可以了。方法是<iframe name=**>,例如我命名為aa,寫入這句HTML語言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>,然后,網頁上的超鏈接語句應該寫為:<a href=URL target=aa>
三、如果把frameborder設為1,效果就像文本框一樣
透明的IFRAME的用法
必需IE5.5以上版本才支持
在transparentBody.htm文件的<body>標簽中,我已經加入了style=”background-color=transparent” 通過以下四種IFRAME的寫法我想大概你對iframe背景透明效果的實現方法應該會有個清晰的了解:
<IFRAME ID=”Frame1″ SRC=”transparentBody.htm” allowTransparency=”true”></IFRAME>
<IFRAME ID=”Frame2″ SRC=”transparentBody.htm” allowTransparency=”true” STYLE=”background-color: green”> </IFRAME>
<IFRAME ID=”Frame3″ SRC=”transparentBody.htm”></IFRAME>
<IFRAME ID=”Frame4″ SRC=”transparentBody.htm” STYLE=”background-color: green”> </IFRAME>
]]>