在 HTML 中， iframe 元素用于在网页中嵌入其它网页的内容，例如：

<iframe src="http://example.com/abc.html">iframe is not supported</iframe>

其中，iframe 的 src 属性指明要显示的其它网页的地址，而标签中的内容仅在浏览器不支持 iframe 时显示。

对于 iframe 元素，有一些需要注意的问题。首先，从它的名称（inline frame）中可以知道，它是 inline 元素，因此如果要让它填满整个 block 元素，需要设置 iframe 的样式为 display: block。比如下面的例子：

<!doctype html>

<head>

<style type="text/css">

div {

    width: 480px;

    height: 320px;

    padding: 0;

    overflow: auto;

}

iframe {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    border: 0 none;

}

</style>

</head>

<body>

<div><iframe src="http://www.w3.org"></iframe></div>

</body>

</html>

这个例子中，由于 iframe 默认是 inline 元素，默认它会放在基线之上，而基线之下还有一定高度（即 descender 部分）所以它会溢出了。因此，我们需要设置 iframe 的样式为 display: block 或者 vertical-align: bottom。

其次，由于 iframe 是替换元素（replaced element），有一些 CSS 样式对它是无效的。例如，你不能在绝对定位中通过同时设置 top，left，right 和 bottom 四个距离来自动确定它的大小。

在 HTML4 中， iframe 还有不少属性，但在 HTML5 中很多都废弃了，只留下 name，src，width，height 这几个。name 属性指明该页面的名称，width 和 height 指明该 iframe 页面的像素大小（不用加 px）。另外，HTML5 中对 iframe 元素还加入了 srcdoc，seamless 和 sandbox 这三个属性。其中，srcdoc 属性可以指明 HTML 内容，如果 srcdoc 和 src 属性都出现时只使用 srcdoc 属性。而 seamless 属性可以让 iframe 嵌入页面和主页面融为一体，比如将 iframe 元素的样式也应用到 iframe 页面中，又如在主页面中打开 iframe 中的链接。最后的 sandbox 属性将禁止 iframe 页面访问主页面的脚本，cookie 等可能涉及到安全性的内容。

参考资料：
[1] W3C HTML4 - Frames in HTML documents
[2] W3C HTML5 - The iframe element
[3] <iframe> - HTML - MDN[4] HTML: Strange space between iframe elements?

HTML 的 iframe 元素的更多相关文章

  1. html iframe 元素之间的调用

    html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...

  2. iframe 元素

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 可以访问:http://www.w3school.com.cn/tags/tag_iframe.asp

  3. JS操作iframe元素

    1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...

  4. iframe元素的学习(笔记)

    什么是iframe:iframe元素即内联框架,iframe是内联的并且承前启后,对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏俱全的页面.重下面的写法可以看出 ...

  5. iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

    HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素. 提示和注释: 提示:您可以把需要的文本 ...

  6. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

  7. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  8. 寻找不到iframe元素

    一直找不到元素,是因为有两层iframe的 找iFrame元素方法如下 1.iFrame有ID 或者 name的情况//进入id="frame1"的frame中,定位id=&quo ...

  9. 父子一对多iframe，子iframe改子iframe元素

    $("iframe", parent.document).contents().find("#ProductNameIn").val(66666666); 1. ...

随机推荐

  1. PHP与最丑的后台管理系统

    第二天阿Q到公司还是比较早,同事只有阿梅在,阿Q坐在椅子上旋转来旋转去,有点像个小孩子.公司有书柜,书柜上放了好几本很新的php的书,.net的书反倒比较少而且显得老旧.阿Q起身走过去拿了本php翻了 ...

  2. 为什么Nagios会那么吵？你又能做些什么呢？（1）

    如果你受困于 Nagios 的告警洪潮中不能自拔,那么这两篇连载博客就是为你而生的.让我们来详细的阐述下这个问题! 运维人员都有着独立的监控工具,因此会经常受到 Nagios 告警吵闹的影响.很多运维 ...

  3. 修改Tomcat内存大小

    Windows下,在文件/bin/catalina.bat,Linux下,在文件/bin/catalina.sh的前面,增加如下设置: JAVA_OPTS=-Xms[初始化内存大小] -Xmx[可以使 ...

  4. 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 80070005 拒绝访问

    检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问 已重装office2 ...

  5. c++ const char *c_str(); 坑的学习

    语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过st ...

  6. 使用智遥工作流，优化SAP请购流程

    传统请购流程,都是用户在SAP系统中填写请购单,然后再打印出来,递交给上级领导审批.领导审批完了,再到SAP系统中更新release标识.若中途请购单内容需要变更,则需要重新打印,审批. 智遥工作流, ...

  7. [Android] 修改设备访问权限

    在硬件抽象层模块中,我们是调用open函数来打开对应的设备文件的.例如,在2.3.2小节中开发的硬件抽象层模块freg中,函数freg_device_open调用open函数来打开设备文件/dev/f ...

  8. 【DataStructure In Python】Python实现各种排序算法

    使用Python实现直接插入排序.希尔排序.简单选择排序.冒泡排序.快速排序.归并排序.基数排序. #! /usr/bin/env python # DataStructure Sort # Inse ...

  9. 校园网之MentoHUST安装与使用

    作用:MentoHUST可以解决校园网锐捷客户端与Windows的兼容性问题,可以解决安装虚拟机之后虚拟机网卡与本地网卡冲突的问题,可以做到愉快的用校园网,并可以愉快的用校园网开Wifi给自己或者小伙 ...

  10. 软件介绍(apache lighttpd nginx)

    一．软件介绍(apache  lighttpd  nginx) 1. lighttpd Lighttpd是一个具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模块等特点.lighttpd是众多 ...