欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML iframe標(biāo)簽用法案例詳解

 更新時(shí)間：2021年08月28日 08:42:02   作者：時(shí)光與流水  
這篇文章主要介紹了HTML iframe標(biāo)簽用法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

        iframe一般用來(lái)包含別的頁(yè)面，例如我們可以在我們自己的網(wǎng)站頁(yè)面加載別人網(wǎng)站的內(nèi)容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性。

一、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>開始,</iframe>結(jié)束 
iframe標(biāo)簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標(biāo)簽時(shí)顯示 

二、屬性

New ：HTML5 中的新屬性。

屬性 值 描述
align left
right
top
middle
bottom		 HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定如何根據(jù)周圍的元素來(lái)對(duì)齊 <iframe>。
frameborder 1
0		 HTML5 不支持。規(guī)定是否顯示 <iframe> 周圍的邊框。
height pixels 規(guī)定 <iframe> 的高度。
longdesc URL HTML5 不支持。規(guī)定一個(gè)頁(yè)面，該頁(yè)面包含了有關(guān) <iframe> 的較長(zhǎng)描述。
marginheight pixels HTML5 不支持。規(guī)定 <iframe> 的頂部和底部的邊距。
marginwidth pixels HTML5 不支持。規(guī)定 <iframe> 的左側(cè)和右側(cè)的邊距。
name name 規(guī)定 <iframe> 的名稱。
sandboxNew ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation		 對(duì) <iframe> 的內(nèi)容定義一系列額外的限制。
scrolling yes
no
auto		 HTML5 不支持。規(guī)定是否在 <iframe> 中顯示滾動(dòng)條。
seamlessNew seamless 規(guī)定 <iframe> 看起來(lái)像是父文檔中的一部分。
src URL 規(guī)定在 <iframe> 中顯示的文檔的 URL。
srcdocNew HTML_code 規(guī)定頁(yè)面中的 HTML 內(nèi)容顯示在 <iframe> 中。
width pixels 規(guī)定 <iframe> 的寬度。

三、示例 

1、iframe框架

代碼如下:

<iframe src="https://www.test.net" width="200" height="500"> 
該網(wǎng)站使用了框架技術(shù)，但是您的瀏覽器不支持框架，請(qǐng)升級(jí)您的瀏覽器以便正常訪問(wèn)。 
</iframe>

2、iframe透明

在transparentBody.htm文件的<body>標(biāo)簽中，我已經(jīng)加入了style="background-color=transparent" 通過(guò)以下四種IFRAME的寫法我想大概你對(duì)iframe背景透明效果的實(shí)現(xiàn)方法應(yīng)該會(huì)有個(gè)清晰的了解： 

代碼如下:

<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，開始遇到的問(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透明找到了解決辦法 

代碼如下:

<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" 

3、iframe自適應(yīng)高度

由于篇幅過(guò)長(zhǎng)，大家可以移步這里查看 

http://www.dbjr.com.cn/article/15780.htm

4、通過(guò)js輸出iframe廣告代碼

[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>');

有時(shí)候我們需要考慮用戶的瀏覽器是否支持iframe標(biāo)簽，那么就需要如下的寫法

代碼如下:

<iframe frameborder="0" name="Iframe1" src="http://www.dbjr.com.cn/" width="100%" height="200">
您的瀏覽器不支持嵌入式框架，或者當(dāng)前配置為不顯示嵌入式框架。
</iframe>

到此這篇關(guān)于HTML iframe標(biāo)簽用法案例詳解的文章就介紹到這了,更多相關(guān)HTML iframe標(biāo)簽用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論