登录  /  注册

如何使用iframe属性

小云云
发布: 2017-11-17 09:15:54
原创
3089人浏览过

当我们学html前期的时候我们会遇到iframe这个属性值,其实iframe是一个很有趣的标签,现在小编就带着初级的同学讲一讲。html iframe 标签的作用就是创建包含另外一个文档的内联框架(即行内框架),通俗点的说法就是在一个html页面嵌入另外一个html页面。这个标签在实际工作中还是比较常见而且重要的。比如一般web项目的后台基本都要用到iframe,还有我们登录各种邮箱也经常会看到点击左边链接,右边网页跟着切换等的效果,基本都是通过iframe实现的。

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

iframe 比较常见的用法如下:

<iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="http://www.phpernote.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(&#39;phpernote&#39;);    
document.write(iframe.scrollHeight);//滚动条高度    
document.write(iframe.scrollWidth);//滚动条宽度    
</script>
登录后复制

以上就是iframe属性的详细说明,希望大家有所掌握,接下来小编还会为大家分享iframe高度自适应的设置方法,有需要的同学可以关注PHP中文网。

相关推荐:

iframe与主框架跨域相互访问方法介绍

iframe子、父页面域内及跨域通信实例

html中frame与iframe有哪些区别

以上就是如何使用iframe属性的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号