iframe的用法

iframe原本的用法在现在看来是不合时宜的，问题太多了，不一一列举，但是它的其他功能却是不错的黑魔法，这里列举一些，想到了再更新：

用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的“服务器推”技术

跨域通信。JavaScript跨域总结与解决办法，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了，其中子页面内容：

window.encoding=function(str){//利用a元素的href属性来encodevara=document.createElement("a");a.href="/?q="+str;varurl=a.href;//这里读取的时候会自动编码a.href="/?q=";returnurl.replace(a.href,"");};

把这个iframe部署到父页面的同源服务上，就能在父页面直接调用iframe中的encoding接口了。

评论里有提到，用iframe实现无刷新文件上传，在FormData不可用时作为替代方案

在移动端用于从网页调起客户端应用（此方法在iphone上并不安全，慎用！具体风险看这里iOS URL Scheme 劫持）。比如想在网页中调起支付宝，我们可以创建一个iframe，src为：

alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}

浏览器接收到这个url请求发现未知协议，会交给系统处理，系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端：给iframe设置一个3-5秒的css3的transition过渡动画，然后监听动画完成事件，如果用户安装了客户端，那么系统会调起，并将浏览器转入后台运行，进入后台的浏览器一般不会再执行css动画，这样，我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了：

/*** 调起客户端* @param url {String}* @param onSuccess {Function}* @param onFail {Function}*/module.exports=function(url,onSuccess,onFail){// 记录起始时间varlast=Date.now();// 创建一个iframevarifr=document.createElement('IFRAME');ifr.src=url;// 飘出屏幕外ifr.style.position='absolute';ifr.style.left='-1000px';ifr.style.top='-1000px';ifr.style.width='1px';ifr.style.height='1px';// 设置一个4秒的动画用于检查客户端是否被调起ifr.style.webkitTransition='all 4s';document.body.appendChild(ifr);setTimeout(function(){// 监听动画完成时间ifr.addEventListener('webkitTransitionEnd',function(){document.body.removeChild(ifr);if(Date.now()-last<6000){// 如果动画执行时间在预设范围内，就认为没有调起客户端if(typeofonFail==='function'){onFail();}}elseif(typeofonSuccess==='function'){// 动画执行超过预设范围，认为调起成功onSuccess();}},false);// 启动动画ifr.style.left='-10px';},0);};

创建一个全新的独立的宿主环境。经@EtherDream大神提醒，iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，那我们就能通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范。类似的还有@贺师俊曾经提到的javascript裸对象创建中的一种方法：如何创建一个JavaScript裸对象，一般所见即所得编辑器也是由iframe创建的，@Dion的回答有提到

IE6下用于遮罩select。经@yaniv提醒想起来的。曾经在ie6时代，想搞一个模态窗口，如果窗口叠加在select元素上面，是遮不住select的，为了解决这个问题，可以通过在模态窗口元素下面垫一个iframe来实现遮罩，好坑爹的ie6，还我青春韶华~~

使用 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