HTML 的 iframe 元素
在 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 元素的更多相关文章
- html iframe 元素之间的调用
html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...
- iframe 元素
iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 可以访问:http://www.w3school.com.cn/tags/tag_iframe.asp
- JS操作iframe元素
1. demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...
- iframe元素的学习(笔记)
什么是iframe:iframe元素即内联框架,iframe是内联的并且承前启后,对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏俱全的页面.重下面的写法可以看出 ...
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素. 提示和注释: 提示:您可以把需要的文本 ...
- jquery/js iframe 元素操作
1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...
- javascript 获取iframe元素的方法
javascript 获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...
- 寻找不到iframe元素
一直找不到元素,是因为有两层iframe的 找iFrame元素方法如下 1.iFrame有ID 或者 name的情况//进入id="frame1"的frame中,定位id=&quo ...
- 父子一对多iframe，子iframe改子iframe元素
$("iframe", parent.document).contents().find("#ProductNameIn").val(66666666); 1. ...
随机推荐
- codeforces 388C Fox and Card Game
刚刚看到这个题感觉是博弈题: 不过有感觉不像,应该是个贪心: 于是就想贪心策略: 举了一个例子: 3 3 1 2 3 4 3 4 1 2 5 4 1 2 5 8 如果他们两个每次都拿对自己最有利的那个 ...
- ps 命令使用总结
ps命令用来查看进程信息,它是类似于快照类型的只显示一次,如果想及时刷新请用top命令. 1. 常用参数列表 -a 显示所有终端机下执行的进程,除了阶段作业领导者之外. a 显示现行终端机下的所有进程 ...
- JNI|在子线程中获得JNIEnv|AttachCurrentThread
A JNI interface pointer (JNIEnv*) is passed as an argument for each native function mapped to a Java ...
- [jobdu]数组中的逆序对
http://ac.jobdu.com/problem.php?pid=1348 数组中的逆序对也是个常见的题目,算法导论中也有一些描述,参考:http://www.cnblogs.com/wuyue ...
- Python Anaconda2 (64-bit) 安装后启动jupyter-notebook默认目录更改
看了网上很多关于更改 python notebook的,好麻烦,所以想了一招. python notebook 现在改名叫 jupyter-notebook ,被集成在Anaconda中. Anaco ...
- IPv6 tutorial – Part 7: Zone ID and unique local IPv6 unicast addresses
The zone ID is used to distinguish ambiguous link-local and site-local addresses. Unique local IPv6 ...
- android & Linux uevent机制
Linux uevent机制 Uevent是内核通知android有状态变化的一种方法,比如USB线插入.拔出,电池电量变化等等.其本质是内核发送(可以通过socket)一个字符串,应用层(andro ...
- MVC——数据库增删改查(Razor)
一.显示信息 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); //定义一个变量取出所有数据 public L ...
- 代码重构的技巧——合理使用@Deprecated
最近由于工作环境不太理想,很长时间没心情写技术博文,今天在调试springMVC的DispatcherSevlet类的代码时,看到一处代码且联想到项目中程序员的一些做法,觉得有必要写一下. 我们在做项 ...
- BZOJ_2194_快速傅立叶之二_(FFT+卷积)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=2194 给出序列\(a[0],a[1],...,a[n-1]\)和\(b[0],b[1],... ...