iframe标签用法详解(属性、透明、自适应高度)

发布时间：2020-05-10 17:53 所属栏目：116 来源：站长网

导读：副标题#e# 1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。提示和注释：提示：您可以把需要的文本放置在 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

规定是否显示框架周围的边框。 TF
height

pixels

规定 iframe 的高度。 TF
longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。 TF
marginheight pixels 定义 iframe 的顶部和底部的边距。 TF
marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF
name frame_name 规定 iframe 的名称。 TF
scrolling

yes

auto

规定是否在 iframe 中显示滚动条。 TF
src URL 规定在 iframe 中显示的文档的 URL。 TF
width

pixels

定义 iframe 的宽度。 TF

示例

复制代码

代码如下:

使用像素定义iframe框架大小

复制代码

代码如下:

使用百分比定义iframe框架大小

2、iframe 透明

在transparentBody.htm文件的<body>标签中，我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：

复制代码

代码如下:

iframe是迫不得已才使用的，因为使用iframe会带来较多的问题，而有的浏览器可以设置将iframe当作广告屏蔽。

在最近的一个工作内容中使用了iframe，开始遇到的问题是iframe高度自适应的问题，这问题在口碑网ued团队博客中找到了解决办法，后来更遇到一个iframe透明的问题

通常 iframe底色会是白色，在不同浏览器下可能会有不同的颜色

如果主页面有一个整体的背景色或者背景图片的时候

iframe区域便会出现一个白色块，与主体页面不协调，这就需要iframe透明

通过google搜索iframe透明找到了解决办法

复制代码

代码如下:

（编辑：ASP站长网）