认识iframe

最近的工作经常能用到iframe标签, 到目前为止对iframe的特性了解甚少, 以至于在使用的时候难以得心应手, 遂利用周末的时间来学习一下.

一. iframe是什么及作用

iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) . 说白了, iframe 用来在页面嵌入其他页面.

二. iframe的优缺点

优点:

页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用
可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息
重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.
iframe可以解决第三方内容加载缓慢的问题.

缺点:

会产生很多页面，不容易管理
iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页
iframe兼容性较差
iframe有一定的安全风险
iframe会阻塞主页面的Onload事件

三. iframe和frame的区别

frame不能脱离frameSet单独使用，iframe可以
frame不能放在body中, iframe可以
嵌套在frameSet中的iframe必需放在body中
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
iframe 可以在表格中使用, frame 则不行
HTML5支持iframe, 不支持frame
frame几乎废弃, iframe老当益壮
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新特性)

规定页面中的 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;

}