最近的工作经常能用到iframe标签, 到目前为止对iframe的特性了解甚少, 以至于在使用的时候难以得心应手, 遂利用周末的时间来学习一下.
一. iframe是什么及作用
iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) . 说白了, iframe用来在页面嵌入其他页面.
二. iframe的优缺点
优点:
1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用
2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息
3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.
4. iframe可以解决第三方内容加载缓慢的问题.
缺点:
1. 会产生很多页面，不容易管理
2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页
3. iframe兼容性较差
4. iframe有一定的安全风险
5. iframe会阻塞主页面的Onload事件
三. iframe和frame的区别
1. frame不能脱离frameSet单独使用，iframe可以
2. frame不能放在body中, iframe可以
3. 嵌套在frameSet中的iframe必需放在body中
4. frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
5. iframe 可以在表格中使用, frame 则不行
6. HTML5支持iframe, 不支持frame
7. frame几乎废弃, iframe老当益壮
8. frame和iframe实现功能基本相同, 不过iframe更灵活. frame是整个页面的框架, iframe是内嵌的网页元素
四. 论iframe的生存价值
在HTML5标准中, 对iframe取消了一些属性, iframe的一些作用有被新功能替代, 例如ajax可以在页面动态插入其他页面的内容. 总的来说, iframe的弊端大于优势, 虽然现在在一些大型电商网站还能看到iframe的身影, 但毕竟技术的潮流不可逆, iframe的生存空间越来越少, 所以在网站开发中还是少用iframe的比较好.
五. iframe属性分析
5.1 align (HTML5 不支持。HTML 4.01 已废弃。)
规定 <iframe> 相对于周围元素的对齐方式, 属性值有 top, right, bottom, left, middle
<iframe align = "top"> </iframe>
5.2 frameborder (HTML5不支持)
规定是否显示 <iframe> 周围的边框.
<iframe frameborder = "0"></iframe> //不显示边框
<iframe frameborder = "1"></iframe> //显示边框
5.3 marginheight (HTML5 不支持)
规定 <iframe> 的顶部和底部的边距。其实可以理解为iframe的上下内边距, 并且这个属性不会增加iframe的高度, 超出默认显示滚动条
<iframe marginheight="10"></iframe>
5.4 marginwidth(HTML5 不支持)
同上, iframe左右内边距, 不影响宽度, 超出显示滚动条
5.5 scrolling(HTML5 不支持)
是否显示滚动条
<iframe scrolling="auto"></iframe> //默认值, 内容超出显示
<iframe scrolling="yes"></iframe> //始终显示
<iframe scrolling="no"></iframe> //始终不显示
5.6 width height(HTML5支持)
<iframe>的宽高, 属性值可以是固定值, 也可以是百分比(父类容器百分比)
<iframe width = "100%" height = "200"></iframe>
5.7 name (HTML5支持)
规定 <iframe> 的名称。
在 XHTML 中，name 属性以废弃，并将被移除。使用 id 属性代替。
<iframe name="helloworld"></iframe>
5.8 src (HTML5支持)
iframe显示的内容地址
<iframe src="www.baidu.com"></iframe>
5.9 sandbox(HTML5新特性)
额外的限制, HTML 5通过sandbox属性提升<iframe>的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。sandbox它可以防止如下操作
访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）
执行脚本
通过脚本嵌入自己的表单或是操纵表单
对cookie、本地存储或本地SQL数据库的读写
<iframe sandbox = ""></iframe> //属性值空字符串 限制上述所有操作
<iframe sandbox = "allow-forms"></iframe> //允许表单提交
<iframe sandbox = "allow-scripts"></iframe> //允许脚本执行
<iframe sandbox = "allow-same-origin"></iframe> //允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。
<iframe sandbox = "allow-top-navigation"></iframe> //嵌入页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context). 如果未使用该关键字，这个操作不可用。
5.10 seamless(HTML5新特性)(只有 Chrome 和 Safari 6 支持 seamless 属性)
染出来的页面你看不出是用iframe内嵌的（没有边框和滚动条)
个人感觉这个新特性不是多余吗? 去掉边框和滚动条不就行了? 难道是因为边框和滚动条在HTML5不支持吗?
<iframe seamless="seamless">
5.11 srcdoc(HTML5新特性)(只有 Chrome 和 Safari 6 支持 seamless 属性)
规定页面中的 HTML 内容显示在 <iframe> 中
<iframe srcdoc="<h1>Hello world!</h1>" src="www.baidu.com"></iframe>
据个人测试, 即使没有src属性, srcdoc的内容也可以正常显示在iframe框架中
六. iframe高度自适应
iframe在响应式页面中 高度自适应的解决办法(iframe高度自适应是个大学问, 这里只列举其中的一种方法)
window.onload = window.onresize = function(){
var ifm= document.getElementById("iframe_id"); //iframe 的 id
var ifmContent = ifm.contentWindow.document.body.scrollHeight || ifm.contentWindow.document.documentElement.scrollHeight;
ifm.height = ifmContent;
}