HTMLiframe标签⽤法案例详解
⽬录
⼀、iframe定义和⽤法
⼆、属性
三、⽰例
1、iframe框架
2、iframe透明
3、iframe⾃适应⾼度
4、通过js输出iframe⼴告代码
iframe⼀般⽤来包含别的页⾯，例如我们可以在我们⾃⼰的⽹站页⾯加载别⼈⽹站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性。
⼀、iframe 定义和⽤法
iframe 元素会创建包含另外⼀个⽂档的内联框架（即⾏内框架）。
HTML 与 XHTML 之间的差异
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不⽀持 iframe 元素。
提⽰和注释：
提⽰：您可以把需要的⽂本放置在 <iframe> 和 </iframe> 之间，这样就可以应对⽆法理解 iframe 的浏览器。
iframe标签是成对出现的，以<iframe>开始,</iframe>结束
iframe标签内的内容可以做为浏览器不⽀持iframe标签时显⽰
⼆、属性
New ：HTML5 中的新属性。
属性值描述
align left
right
top
middle
bottom
HTML5 不⽀持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>。
frameborder 1
HTML5 不⽀持。规定是否显⽰ <iframe> 周围的边框。
height pixels规定 <iframe> 的⾼度。
longdesc URL HTML5 不⽀持。规定⼀个页⾯，该页⾯包含了有关 <iframe> 的较长描述。marginheight pixels HTML5 不⽀持。规定 <iframe> 的顶部和底部的边距。
marginwidth pixels HTML5 不⽀持。规定 <iframe> 的左侧和右侧的边距。
name name规定 <iframe> 的名称。
sandbox New ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
对 <iframe> 的内容定义⼀系列额外的限制。
scrolling yes
no
auto
HTML5 不⽀持。规定是否在 <iframe> 中显⽰滚动条。
seamless New seamless规定 <iframe> 看起来像是⽗⽂档中的⼀部分。
src URL规定在 <iframe> 中显⽰的⽂档的 URL。
srcdoc New HTML_code规定页⾯中的 HTML 内容显⽰在 <iframe> 中。
width pixels规定 <iframe> 的宽度。
三、⽰例
1、iframe框架
代码如下:
<iframe src="st" width="200" height="500">
该⽹站使⽤了框架技术，但是您的浏览器不⽀持框架，请升级您的浏览器以便正常访问。
</iframe>
2、iframe透明
在transparentBody.htm⽂件的<body>标签中，我已经加⼊了 通过以下四种IFRAME的写法我想⼤概你对
iframe背景透明效果的实现⽅法应该会有个清晰的了解：
代码如下:
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
html frame<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是迫不得已才使⽤的，因为使⽤iframe会带来较多的问题，⽽有的浏览器可以设置将iframe当作⼴告屏蔽。
在最近的⼀个⼯作内容中使⽤了iframe，开始遇到的问题是iframe⾼度⾃适应的问题，这问题在⼝碑⽹ued团队博客中到了解决办法，后来更遇到⼀个iframe透明的问题，通常 iframe底⾊会是⽩⾊，在不同浏览器下可能会有不同的颜⾊，如果主页⾯有⼀个整体的背景⾊或者背景图⽚的时候，iframe区域便会出现⼀个⽩⾊块，与主体页⾯不协调，这就需要iframe透明
通过google搜索iframe透明到了解决办法
代码如下:
<iframe src="./ads_top_tian.html" allowtransparency="true" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>当然前提是iframe页⾯中没有设置颜⾊
[code]
注：iframe透明主要是使⽤了 allowtransparency="true"
3、iframe⾃适应⾼度
由于篇幅过长，⼤家可以移步这⾥查看
4、通过js输出iframe⼴告代码
[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="img.jb51/imgby/
468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>'); 有时候我们需要考虑⽤户的浏览器是否⽀持iframe标签，那么就需要如下的写法
代码如下:
<iframe frameborder="0" name="Iframe1" src="www.jb51/" width="100%" height="200">
您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显⽰嵌⼊式框架。
</iframe>
到此这篇关于HTML iframe标签⽤法案例详解的⽂章就介绍到这了，更多相关HTML iframe标签⽤法内容请搜索以前的⽂章或继续浏览下⾯的相关
⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。