iframe学习总结
生活随笔
收集整理的這篇文章主要介紹了
iframe学习总结
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)
iframe一般用來(lái)包含別的頁(yè)面，例如我們可以在我們自己的網(wǎng)站頁(yè)面加載別人網(wǎng)站的內(nèi)容，為了更好的
效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡(jiǎn)單的整理下，
1、iframe 定義和用法?
iframe 元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。?
HTML 與 XHTML 之間的差異?
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。?
提示和注釋：?
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應(yīng)對(duì)無(wú)法理解 iframe 的
瀏覽器。?
iframe標(biāo)簽是成對(duì)出現(xiàn)的,以<iframe>開(kāi)始,</iframe>結(jié)束?
iframe標(biāo)簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標(biāo)簽時(shí)顯示?
屬性?
屬性 值 描述 DTD
align
left
right
top
middle
bottom
不贊成使用。請(qǐng)使用樣式代替。
規(guī)定如何根據(jù)周?chē)脑貋?lái)對(duì)齊此框架。
TF
frameborder
1
0
規(guī)定是否顯示框架周?chē)倪吙颉? TF
height
pixels
%
規(guī)定 iframe 的高度。 TF
longdesc URL 規(guī)定一個(gè)頁(yè)面，該頁(yè)面包含了有關(guān) iframe 的較長(zhǎng)描述。 TF
marginheight pixels 定義 iframe 的頂部和底部的邊距。 TF
marginwidth pixels 定義 iframe 的左側(cè)和右側(cè)的邊距。 TF
name frame_name 規(guī)定 iframe 的名稱(chēng)。 TF
scrolling
yes
no
auto
規(guī)定是否在 iframe 中顯示滾動(dòng)條。 TF
src URL 規(guī)定在 iframe 中顯示的文檔的 URL。 TF
width
pixels
%
定義 iframe 的寬度。 TF
示例?
復(fù)制代碼代碼如下:
<iframe src="http://www.jb51.net" width="200" height="500">?
腳本之家使用了框架技術(shù)，但是您的瀏覽器不支持框架，請(qǐng)升級(jí)您的瀏覽器以便正常訪問(wèn)腳本之家。?
</iframe>?
使用像素定義iframe框架大小?
復(fù)制代碼代碼如下:
<iframe src="http://www.baidu.com" width="20%" height="50%">?
腳本之家使用了框架技術(shù)，但是您的瀏覽器不支持框架，請(qǐng)升級(jí)您的瀏覽器以便正常訪問(wèn)腳本之家。?
</iframe>?
使用百分比定義iframe框架大小?
2、iframe 透明
在transparentBody.htm文件的<body>標(biāo)簽中，我已經(jīng)加入了style="background-color=transparent"?
通過(guò)以下四種IFRAME的寫(xiě)法我想大概你對(duì)iframe背景透明效果的實(shí)現(xiàn)方法應(yīng)該會(huì)有個(gè)清晰的了解：?
復(fù)制代碼代碼如下:
<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>?
iframe是迫不得已才使用的，因?yàn)槭褂胕frame會(huì)帶來(lái)較多的問(wèn)題，而有的瀏覽器可以設(shè)置將iframe當(dāng)作
廣告屏蔽。?
在最近的一個(gè)工作內(nèi)容中使用了iframe，開(kāi)始遇到的問(wèn)題是iframe高度自適應(yīng)的問(wèn)題，這問(wèn)題在口碑網(wǎng)
ued團(tuán)隊(duì)博客中找到了解決辦法，后來(lái)更遇到一個(gè)iframe透明的問(wèn)題?
通常 iframe底色會(huì)是白色，在不同瀏覽器下可能會(huì)有不同的顏色?
如果主頁(yè)面有一個(gè)整體的背景色或者背景圖片的時(shí)候?
iframe區(qū)域便會(huì)出現(xiàn)一個(gè)白色塊，與主體頁(yè)面不協(xié)調(diào)，這就需要iframe透明?
通過(guò)google搜索iframe透明找到了解決辦法?
復(fù)制代碼代碼如下:
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-
color=transparent" title="test" frameborder="0" width="470" height="308"?
scrolling="no"></iframe>當(dāng)然前提是iframe頁(yè)面中沒(méi)有設(shè)置顏色?
[code]?
注：iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent"?
<strong>3、iframe自適應(yīng)高度
</strong>由于篇幅過(guò)長(zhǎng)，大家可以移步這里查看?
<a target="_blank"?
href="http://www.jb51.net/article/15780.htm">http://www.jb51.net/article/15780.htm</a>
<strong>4、通過(guò)js輸出iframe廣告代碼
</strong>[code]?
document.write('<iframe align=middle marginwidth=0 marginheight=0?
src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660?
height=80></iframe>');?
5、有時(shí)候我們需要考慮用戶的瀏覽器是否支持iframe標(biāo)簽，那么就需要如下的寫(xiě)法
復(fù)制代碼代碼如下:
<iframe frameborder="0" name="Iframe1" src="http://www.jb51.net/" width="100%"?
height="200">
您的瀏覽器不支持嵌入式框架，或者當(dāng)前配置為不顯示嵌入式框架。
</iframe>
========
iframe如何刷新的三種實(shí)現(xiàn)方案
iframe如何刷新一直都被網(wǎng)友所關(guān)注，接下來(lái)為大家詳細(xì)介紹下三種:用iframe的name屬性定位/id屬性
定位/當(dāng)iframe的src為其它網(wǎng)站地址時(shí),
代碼如下:
<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>?
方案一:?
用iframe的name屬性定位?
復(fù)制代碼代碼如下:
<input type="button" name="Button" value="Button" οnclick="document.frames
('ifrmname').location.reload()">或?
<input type="button" name="Button" value="Button"?
οnclick="document.all.ifrmname.document.location.reload()">?
方案二:?
用iframe的id屬性定位?
復(fù)制代碼代碼如下:
<input type="button" name="Button" value="Button" οnclick="ifrmid.window.location.reload
()">?
終極方案:?
當(dāng)iframe的src為其它網(wǎng)站地址(跨域操作時(shí))?
復(fù)制代碼代碼如下:
<input type="button" name="Button" value="Button" οnclick="window.open
(document.all.ifrmname.src,'ifrmname','')">?
========
iframe的src賦值問(wèn)題(服務(wù)器端)
frame的src賦值的問(wèn)題，本文將進(jìn)行詳細(xì)探討:服務(wù)器端的iframe重新src重新賦值,給iframe加一個(gè)ID，
再加上runat=server，?
今天遇到這個(gè)問(wèn)題，服務(wù)器端的iframe重新src重新賦值,給iframe加一個(gè)ID，再加上runat=server?
1.通過(guò)JS 給 iframe 的src 賦值?
2.如果需要在C# 后臺(tái)，頁(yè)面加載時(shí)就改變iframe的src 可以通過(guò)?
如<iframe id="ifram" runat=server >申請(qǐng)為服務(wù)器端控件?
在程序里寫(xiě)?
復(fù)制代碼代碼如下:
ifram.Attributes.Add("src",strUrl);?
strUrl是個(gè)string可以任意賦值了。
========
iframe的src設(shè)置為about:blank之后細(xì)節(jié)探討
不設(shè)置為about:blank，內(nèi)存不會(huì)釋放掉。還必須用 iframe.document.write(''); 這樣才能將內(nèi)容清空
，本文將詳細(xì)探討一下iframe的src設(shè)置為about:blank之后細(xì)節(jié)，?
設(shè)置 iframe 的 src 為 'about:blank' 之后，不置為“about:blank”，內(nèi)存不會(huì)釋放掉。還必須用?
iframe.document.write('');?
這樣才能將內(nèi)容清空，但是這樣處理之后任然會(huì)有500-1000K左右的內(nèi)存殘留，這就是ie6的iframe bug
，動(dòng)態(tài)創(chuàng)建的iframe總會(huì)耗費(fèi)掉一些內(nèi)存。?
復(fù)制代碼代碼如下:
function clearIframe(id){?
var el = document.getElementById(id),?
iframe = el.contentWindow;?
if(el){?
el.src = 'about:blank';?
try{?
iframe.document.write('');?
iframe.document.clear();?
}catch(e){};?
//以上可以清除大部分的內(nèi)存和文檔節(jié)點(diǎn)記錄數(shù)了?
//最后刪除掉這個(gè) iframe 就哦咧。?
document.body.removeChild(el);?
} } clearIframe('iframe_id');?
========
總結(jié)
以上是生活随笔為你收集整理的iframe学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： .net (object sender,
- 下一篇： document.getElementB