A-A+

iframe属性常用方法

2016年01月04日 前端设计 暂无评论 阅读 11 views 次

iframe 框架结构式的网页现在已经很少见了,因为最大的缺点就是不利于SEO的优化,但依然在一些网页应用中使用较广泛,比如我们的后台是一定要使用 iframe 的,点击左侧或者上方的导航按钮,下面直接变化显示相关内容,这样最大的优点就是不用刷新整个后台框架以达到我们想要的视觉效果,还有在一些网页前端,有一些特殊的功能也有可能要用到 iframe 这种框架,因为这种相对于其它新型的 ajax 等技术,还是效率比较高的,所以夏日博客在这里就 iframe 属性以及 iframe 常用的一些方法记录下来,以备使用。

iframe 较常见的用法如下:

  1. <iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="https://www.xiariboke.net/"></iframe>  

大多数的 iframe 框架基本上都会怎么用,不一样的地方无非就是 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。

好了,这些属性我们没必要死记硬背,只要收藏下来,使用的时候直接摘抄就可以了,下面我们再来举几个 iframe 的具体实例吧。

iframe 较常见实例如下.

(1)父框架页的代码

  1. <iframe allowTransparency="true" src="phpernote.html" noresize></iframe>  

3. 指定iframe的id属性,获取iframe滚动条的高度和宽度

  1. <iframe id="phpernote" src="www.xiariboke.net"></iframe>  
  2. <script type="text/javascript">  
  3. var iframe=document.getElementById('xiariboke');  
  4. document.write(iframe.scrollHeight);//滚动条高度  
  5. document.write(iframe.scrollWidth);//滚动条宽度  
  6. </script>  

夏日博客之前发布的关于 iframe 框架的文章.

iframe框架高度随内容的变化而变化 https://www.xiariboke.net/design/651.html

wordpress防止外部iframe框架引入网站内容 https://www.xiariboke.net/soft/1535.html

iframe 自适应高度 https://www.xiariboke.net/design/2003.html

给我留言