iframe标签用法详解（属性、透明、自适应高度）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
iframe标签⽤法详解（属性、透明、⾃适应⾼度）1、iframe 定义和⽤法
iframe 元素会创建包含另外⼀个⽂档的内联框架（即⾏内框架）。
HTML 与 XHTML 之间的差异
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不⽀持 iframe 元素。
提⽰和注释：
提⽰：您可以把需要的⽂本放置在 <iframe> 和 </iframe> 之间，这样就可以应对⽆法理解 iframe 的浏览器。
iframe标签是成对出现的,以<iframe>开始,</iframe>结束
iframe标签内的内容可以做为浏览器不⽀持iframe标签时显⽰
属性
属性值描述DTD
align left
right
top
middle
bottom
不赞成使⽤。
请使⽤样式代替。
规定如何根据周围的元素来对齐此框架。
TF
frameborder 1
0规定是否显⽰框架周围的边框。
TF
height pixels
%规定 iframe 的⾼度。
TF
longdesc URL规定⼀个页⾯，该页⾯包含了有关 iframe 的较长描述。
TF marginheight pixels定义 iframe 的顶部和底部的边距。
TF marginwidth pixels定义 iframe 的左侧和右侧的边距。
TF name frame_name规定 iframe 的名称。
TF
scrolling yes
no
auto
规定是否在 iframe 中显⽰滚动条。
TF
src URL规定在 iframe 中显⽰的⽂档的 URL。
TF
width pixels
%定义 iframe 的宽度。
TF
⽰例
复制代码
代码如下:
<iframe src="https://" width="200" height="500">
使⽤了框架技术，但是您的浏览器不⽀持框架，请升级您的浏览器以便正常访问。
</iframe>
使⽤像素定义iframe框架⼤⼩
复制代码
代码如下:
<iframe src="" width="20%" height="50%">
使⽤了框架技术，但是您的浏览器不⽀持框架，请升级您的浏览器以便正常访问。
</iframe>
使⽤百分⽐定义iframe框架⼤⼩
2、iframe 透明
在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>
iframe是迫不得已才使⽤的，因为使⽤iframe会带来较多的问题，⽽有的浏览器可以设置将iframe当作⼴告屏蔽。
在最近的⼀个⼯作内容中使⽤了iframe，开始遇到的问题是iframe⾼度⾃适应的问题，这问题在⼝碑⽹ued团队博客中找到了解决办法，后来更遇到⼀个iframe透明的问题
通常 iframe底⾊会是⽩⾊，在不同浏览器下可能会有不同的颜⾊
如果主页⾯有⼀个整体的背景⾊或者背景图⽚的时候
iframe区域便会出现⼀个⽩⾊块，与主体页⾯不协调，这就需要iframe透明
通过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>当然前提是iframe页⾯中没有设置颜⾊
[code]
注：iframe透明主要是使⽤了 allowtransparency="true" style="background-color=transparent"
<strong>3、iframe⾃适应⾼度
</strong>由于篇幅过长，⼤家可以移步这⾥查看
<a target="_blank" href="https:///article/15780.htm">https:///article/15780.htm</a>
<strong>4、通过js输出iframe⼴告代码
</strong>[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');
5、有时候我们需要考虑⽤户的浏览器是否⽀持iframe标签，那么就需要如下的写法
复制代码
代码如下:
<iframe frameborder="0" name="Iframe1" src="https:///" width="100%" height="200">
您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显⽰嵌⼊式框架。
</iframe>。