- 使用 iframe 是不是一个好的用法(good practice),不能一概而论,但是可以肯定是,现在的大部分网站避免采用这种方式的。
- 比较早期的网站使用 iframe,主要是用于导航栏(navigator)。为什么?
因为一个网站很多页面的导航栏部分是相同的,在避免切换页面的时候重复下载,将导航栏和正文分开在 iframe 中,是一个方便的做法。
同时带来的不利是,默认情况下,使用了 iframe 的网站的 URL 不会随着页面的变化而变化。
这就意味着一旦刷新,网站可能又回到首页。
那么现在的网站是如何解决不同页面使用相同的 navigator 而避免重复编码呢?
不同后台技术都有自己的方法,比如 ASP 有 SSI,PHP 有 require、require_once 或 include 函数,JSP 也有 include 指令。 - iframe 一直是浏览器标准规范之一,只有很早期的浏览器不支持 iframe,现在几乎已绝迹。
所以从兼容性上来说,iframe 是没问题的。 - 那么现在什么时候会用到 iframe 呢?
因为 iframe 的页面和父页面(parent)是分开的,所以它意味着,这是一个独立的区域,不受 parent 的 CSS 或者全局的 JavaScript 的影响。
典型的,比如所见即所得的网页编辑器(WYSIWYG Online HTML Editor),因为它们需要 reset 自己的 CSS 到自己的标准,而不被 parent CSS 的 override。 - 说到上面一点了,顺便说一下,知乎的这个编辑器不是用 iframe,它使用了一种叫 contentEditable 的属性,用来启用页面元素的编辑,在早期版本 IE 下不支持的。
- 正是因为刚刚提到的 iframe 等于新建了一个全新的,不受 parent 影响的页面上下文,所以在一定程度上,类似于沙箱隔离(sandbox)。
除此之外,如果有可以不用 iframe 来解决的问题,还是避免使用 iframe。
替代方案一般就是动态语言的 include 机制、ajax 动态填充内容,以及以后会普及的 contentEditable。
iframe的黑魔法:
- 用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的“服务器推”技术
- 跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。
- 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
- 纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件
-
- 评论里有提到,用iframe实现无刷新文件上传,在FormData不可用时作为替代方案
- 在移动端用于从网页调起客户端应用(此方法在iphone上并不安全,慎用!具体风险看这里 iOS URL Scheme 劫持 )。比如想在网页中调起支付宝,
浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了
- 创建一个全新的独立的宿主环境。经 @EtherDream 大神提醒,iframe还可以用于创建新的宿主环境,用于隔离或者访问原始接口及对象,比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用,那我们就能通过创建一个iframe,然后从iframe中取回原始对象和方法来破解这种防范。类似的还有 @贺师俊 曾经提到的javascript裸对象创建中的一种方法:如何创建一个JavaScript裸对象 ,一般所见即所得编辑器也是由iframe创建的, @Dion 的回答有提到
- IE6下用于遮罩select。经 @yaniv 提醒想起来的。曾经在ie6时代,想搞一个模态窗口,如果窗口叠加在select元素上面,是遮不住select的,为了解决这个问题,可以通过在模态窗口元素下面垫一个iframe来实现遮罩,好坑爹的ie6,还我青春韶华~~