codetc - 网站开发技术 首页 前端 查看内容

HTML iframe属性详细说明

2015-3-10 18:39| 发布者: CODETC| 查看: 1466| 评论: 1

HTML iframe 标签的作用是创建包含另外一个文档的内联框架(即行内框架),通俗点的说法就是在一个html页面嵌入另外一个html页面。这个标签在实际工作中还是比较常见而且重要的。比如一般web项目的后台基本都要用到iframe,还有我们登录各种邮箱也经常会看到点击左边链接,右边网页跟着切换等的效果,基本都是通过iframe实现的,当然也有使用div实现的,不过由于iframe的简单和易用性,在这种功能设计中是div无法比拟的。


注意:网页页面使用框架会对页面的收录有一定的影响,所以在网站前台的话建议慎用frame或iframe框架。


所有浏览器都支持iframe标签,因此不存在兼容性问题。

iframe 比较常见的用法如下:

<iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="http://www.codetc.com/"></iframe>

以上代码中的参数根据实际情况需要再修改,下面列举一下iframe的一些比较常见的属性。

name 设定iframe的名称
longdesc 关于iframe的描述说明,此属性基本不支持现在的主流浏览器,因此没必要使用
border 设定iframe边缘的宽度
bordercolor 设定iframe边框的颜色,值可以是rgb色,也可以是颜色名称
frameboder 设置边框是否为3维(0=否,1=是)
height 设置iframe的高度(可用像素值或百分比)
width 设置iframe的宽度(可用像素值或百分比)
marginheight 定义iframe的顶部和底部的边距
marginwidth 定义iframe的左侧和右侧的边距
scrolling 是否有滚动条(可取的值有yes,no,auto)
src 指定iframe调用的文件(可引用文件如:html,htm,gif,jpeg,jpg,png,txt,*.*)
noresize 禁止调整尺寸,这个仅支持IE核心的浏览器
allowtransparency 是否允许透明。IE5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。

1. 与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。

2. 在 iframe 内容源文档,background- color 或 body 元素的 bgColor 标签属性必须设置为 transparent。


实例如下:
(1)父框架页的代码
<body bgColor="#eeeeee">
<iframe allowTransparency="true" src="phpernote.html" noresize></iframe>
(2)子框架页代码(即phpernote.html页面代码)
<body bgColor="transparent">

3. 指定iframe的id属性,获取iframe滚动条的高度和宽度
<iframe id="phpernote" src="www.phpernote.com"></iframe>
<script type="text/javascript">
	var iframe=document.getElementById('phpernote');
	document.write(iframe.scrollHeight);//滚动条高度
	document.write(iframe.scrollWidth);//滚动条宽度
</script>
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-151-1.html
发表评论

最新评论

查看全部评论(1)

 作为游客发表评论,请输入您的昵称

返回顶部