Iframe 的好处和坏处

作者：黎燃

2022 年 5 月 11 日
本文字数：947 字
阅读完需：约 3 分钟

用来实现长连接在 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 的例子如：