Iframe的好处和坏处

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

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

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

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

<!doctype html>
<html>
  <head>
    <meta charset="gbk">
    <script>
      window.encoding = function(str){
        //利用a元素的href属性来encode
        var a = document.createElement("a");
        a.href = "/?q=" + str;
        var url = a.href; //这里读取的时候会自动编码
        a.href = "/?q=";
        return url.replace(a.href, "");
      };
    </script>
  </head>
</html>

问答:

比较早期的网站使用 iframe,主要是用于导航栏(navigator)。为什么?
因为一个网站很多页面的导航栏部分是相同的,在避免切换页面的时候重复下载,将导航栏和正文分开在 iframe 中,是一个方便的做法。同时带来的不利是,默认情况下,使用了 iframe 的网站的 URL 不会随着页面的变化而变化。这就意味着一旦刷新,网站可能又回到首页。那么现在的网站是如何解决不同页面使用相同的 navigator 而避免重复编码呢?不同后台技术都有自己的方法,比如 ASP 有 SSI,PHP 有 require、require_once 或 include 函数,JSP 也有 include 指令。
那么现在什么时候会用到 iframe 呢?
因为 iframe 的页面和父页面(parent)是分开的,所以它意味着,这是一个独立的区域,不受 parent 的 CSS 或者全局的 JavaScript 的影响。典型的,比如所见即所得的网页编辑器(WYSIWYG Online HTML Editor),因为它们需要 reset 自己的 CSS 到自己的标准,而不被 parent CSS 的 override。
现在,应该使用 iframe 的例子如:

  1. 沙箱隔离。
  2. 引用第三方内容。
  3. 独立的带有交互的内容,比如幻灯片。
  4. 需要保持独立焦点和历史管理的子窗口,如复杂的Web应用。
上一篇:【毕业设计】图灵机器人的实现


下一篇:Bootstrap实战 - 单页面网站