iframe标签用法详解(属性、透明、…

淡淡的烟草味﹌ 2024-01-30 00:36 36阅读 0赞

**1、iframe 定义和用法**  
  
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。  
  
**HTML 与 XHTML 之间的差异**  
  
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。  
  
**提示和注释：**  
  
提示：您可以把需要的文本放置在 之间，这样就可以应对无法理解 iframe 的浏览器。  
  
iframe标签是成对出现的,以结束  
  
iframe标签内的内容可以做为浏览器不支持iframe标签时显示  
  
属性

<table style="padding: 0px; margin: 0.54em 0px 0px; font-family: 微软雅黑, 华文新魏; border: 1px solid rgb(204, 204, 204); width: 657px; border-collapse: collapse; text-align: center; clear: both; color: rgb(68, 68, 68); line-height: 25px; background-color: rgb(255, 255, 255);"> 
 <tbody style="padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif;"> 
 <tr style="padding: 0px; margin: 0px;"> 
 <th style="padding: 0.2em 0.46em; margin: 0px; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: baseline; background-color: rgb(243, 243, 243);"> 属性</th> 
 <th style="padding: 0.2em 0.46em; margin: 0px; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: baseline; background-color: rgb(243, 243, 243);"> 值</th> 
 <th style="padding: 0.2em 0.46em; margin: 0px; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: baseline; background-color: rgb(243, 243, 243);"> 描述</th> 
 <th style="padding: 0.2em 0.46em; margin: 0px; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: baseline; background-color: rgb(243, 243, 243);"> DTD</th> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML align</a></td><td style=" rel="nofollow"></a> 
 <ul style="padding: 0px; margin: 0px; list-style-type: none;"> 
 <li style="padding: 0px; margin: 0px;">left</li> 
 <li style="padding: 0px; margin: 0px;">right</li> 
 <li style="padding: 0px; margin: 0px;">top</li> 
 <li style="padding: 0px; margin: 0px;">middle</li> 
 <li style="padding: 0px; margin: 0px;">bottom</li> 
 </ul> </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML frameborder</a></td><td style=" rel="nofollow"></a> 
 <ul style="padding: 0px; margin: 0px; list-style-type: none;"> 
 <li style="padding: 0px; margin: 0px;">1</li> 
 <li style="padding: 0px; margin: 0px;">0</li> 
 </ul> </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定是否显示框架周围的边框。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML height</a></td><td style=" rel="nofollow"></a> 
 <ul style="padding: 0px; margin: 0px; list-style-type: none;"> 
 <li style="padding: 0px; margin: 0px;">pixels</li> 
 <li style="padding: 0px; margin: 0px;">%</li> 
 </ul> </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定 iframe 的高度。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML longdesc</a></td><td style=" rel="nofollow">URL</a></td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定一个页面，该页面包含了有关 iframe 的较长描述。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML marginheight</a></td><td style=" rel="nofollow">pixels</a></td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 定义 iframe 的顶部和底部的边距。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML marginwidth</a></td><td style=" rel="nofollow">pixels</a></td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 定义 iframe 的左侧和右侧的边距。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML name</a></td><td style=" rel="nofollow">frame_name</a></td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定 iframe 的名称。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML scrolling</a></td><td style=" rel="nofollow"></a> 
 <ul style="padding: 0px; margin: 0px; list-style-type: none;"> 
 <li style="padding: 0px; margin: 0px;">yes</li> 
 <li style="padding: 0px; margin: 0px;">no</li> 
 <li style="padding: 0px; margin: 0px;">auto</li> 
 </ul> </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定是否在 iframe 中显示滚动条。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML src</a></td><td style=" rel="nofollow">URL</a></td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 规定在 iframe 中显示的文档的 URL。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 <tr style="padding: 0px; margin: 0px;"> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> <a title="HTML width</a></td><td style=" rel="nofollow"></a> 
 <ul style="padding: 0px; margin: 0px; list-style-type: none;"> 
 <li style="padding: 0px; margin: 0px;">pixels</li> 
 <li style="padding: 0px; margin: 0px;">%</li> 
 </ul> </td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> 定义 iframe 的宽度。</td> 
 <td style="padding: 0.2em 0.46em; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); vertical-align: text-top; background-color: rgb(239, 239, 239);"> TF</td> 
 </tr> 
 </tbody> 
</table>

**示例**

复制代码

代码如下:

脚本之家使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问脚本之家。

使用像素定义iframe框架大小

复制代码

代码如下:

脚本之家使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问脚本之家。

使用百分比定义iframe框架大小   
  
 **2、iframe 透明**  
  
 在transparentBody.htm文件的标签中，我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：

复制代码

代码如下:

iframe是迫不得已才使用的，因为使用iframe会带来较多的问题，而有的浏览器可以设置将iframe当作广告屏蔽。   
  
 在最近的一个工作内容中使用了iframe，开始遇到的问题是iframe高度自适应的问题，这问题在口碑网ued团队博客中找到了解决办法，后来更遇到一个iframe透明的问题   
  
 通常 iframe底色会是白色，在不同浏览器下可能会有不同的颜色   
  
 如果主页面有一个整体的背景色或者背景图片的时候   
  
 iframe区域便会出现一个白色块，与主体页面不协调，这就需要iframe透明   
  
 通过google搜索iframe透明找到了解决办法

复制代码

代码如下:

当然前提是iframe页面中没有设置颜色  
\[code\]  
注：iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent"  
**3、iframe自适应高度**  
由于篇幅过长，大家可以移步这里查看  
[http://www.jb51.net/article/15780.htm][http_www.jb51.net_article_15780.htm]  
**4、通过js输出iframe广告代码**  
\[code\]  
document.write('');

[http_www.jb51.net_article_15780.htm]: http://www.jb51.net/article/15780.htm