iframe标签用法详解

巴扎黑 原创: 2017-06-27 10:01:09 1409浏览

iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使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	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框架大小

代码如下:

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

代码如下:

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

代码如下:

5、有时候我们需要考虑用户的浏览器是否支持iframe标签，那么就需要如下的写法

代码如下:

以上就是iframe标签用法详解的详细内容，更多请关注php中文网其它相关文章！

iframe 详解标签用法 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：frameset标签、frame标签、iframe标签的使用分析下一条：frameset标签设计页面注意事项