在 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. LibLinear(SVM包)使用说明之(二)MATLAB接口

    LibLinear(SVM包)使用说明之(二)MATLAB接口 LibLinear(SVM包)使用说明之(二)MATLAB接口 zouxy09@qq.com http://blog.csdn.net/ ...

  2. ASP.NET MVC 入门3、Routing

    本系列文章基于Microsoft ASP.NET MVC Beta. 在一个route中,通过在大括号中放一个占位符来定义( { and } ).当解析URL的时候,符号"/"和& ...

  3. 基于msys2工具集,自编译gcc-6.2.0、Qt-5.6.1-1和Qt-4.8.7(有nuwen.net网站提供的脚本)

    好久没更新(其实大可不要经常更新吧),一直都是用Qt4,最近想着转向Qt5了,msys2是自带Qt的,但工具链经常会更新,依赖也较多,简便才方便,做了最后一组Qt工具的更新,如题,Qt-4.8.7作为 ...

  4. js中JSON对象和字符串对象相互转化

    JSON.stringify(value [, replacer] [, space]) //作用,将json数据转化为字符串value:是必须要的字段.就是你输入的对象,比如数组啊,类啊等等. re ...

  5. ActionBar官方教程(7)自定义操作项的view,如何得到它及处理它的事件

    Adding an Action View An action view is a widget that appears in the action bar as a substitute for ...

  6. php include include_once require require_once 的区别与联系

    一.require 与 include 的区别: The require() function is identical to include(), except that it handles er ...

  7. 关于JQuery与AJAX验证

    AJAX验证,其实就是JS代码,他就是先利用Jquery或JS获取一个值,然后偷偷的把值传送到验证界面,然后在偷偷的把验证后的结果给传回来,利用传回来的结果在进行JS判断,从而不会刷新界面. 用图片解 ...

  8. zoj 1033 与其说是搜索,不如说是枚举

    zoj 与其说是搜索,不如说是枚举,只不过是通过搜索来实现的罢了. 主要是要注意好闰年的判断,特别是要注意好一串数字的划分. 题意其实我也看了一个晚上,才渐渐的看懂. 题意: 给你一个字符串,其中包含 ...

  9. Eclipse 中使用Genymotion 作为模拟器的步骤

    我这里是先安装的genymotion, 后安装的eclipse. 1:安装genymotion 无难度, 直接安装就行了. 2:安装eclipse 下载adt即可, 解压运行. 3:运行eclipse ...

  10. Java之 AtomicInteger

    AtomicInteger,一个提供原子操作的Integer的类.在Java语言中,++i和i++操作并不是线程安全的,在使用的时候,不可避免的会用到synchronized关键字.而AtomicIn ...