Minimize Number of iframes (尽量少用iframe)

这一篇我和大家讨论的是第二十一条原则：Minimize Number of iframes (尽量少用iframe)。

iframe以及与之相关的frameset,frame 都是早期HTML版本的产物，我记得在我第一次使用FrontPage创建网站的时候（那真的是很多年前了），确实用过它们，那时候其实主要用的是HTML，连ASP都是刚刚作为新事物被介绍，更不要说什么ASP.NET，以及AJAX等方面的新鲜玩意儿了。

frame 是必须嵌套在frameset里面用的，可以将它们理解为在一个页面大框架里面，定义了几个不同的框架，组成的一个框架集。每个框架可以加载一个页面。而iframe本质上就是一个frame,只不过是inner-frame（内联框架），也就是说这种框架是不需要有框架集的，可以自成一体，随意嵌套在页面的任意地方。

【备注】iframe在HTML的后续版本（例如HTML 5）中还是支持的，但frameset和frame 已经明确地要告别历史舞台了。

 

iframe可以用来做什么呢？

1. 它使得在一个网页中嵌入另外一个网页变得可能。
2. 为了避免这些嵌入的网页对我们自己的网页产生不利的影响，iframe实现了一个安全沙箱（Security Sandbox）。关于这一点，在HTML 5中进行了更加明确和丰富地支持。你可以参考
   • http://developer.51cto.com/art/201002/181875.htm
   • http://msdn.microsoft.com/EN-US/library/windows/apps/hh441129(v=vs.10).aspx
   • https://developer.mozilla.org/zh-CN/docs/HTML/Element/iframe
3. 使用iframe可以实现并行的脚本下载。因为在框架里面是一个独立的运行环境，它里面的资源可以和主页面的资源并行下载。

 

目前新浪微博提供的“微博秀”还是用iframe来实现的。

iframe 可能的问题？

1. 安全问题：像上面提到的那样，虽然有安全沙箱，但其实还是有安全风险的。因为iframe引用的是别人做的网页。
2. 兼容性问题：并非所有浏览器都能很好地支持iframe。
3. 性能问题：iframe会导致页面加载变慢。
4. 其他问题：iframe的宽度和高度不能自动适应内容大小。

 

iframe替代方案

如果不用iframe，那么如何在页面中嵌入其他网站的内容呢？绝大部分时候，脚本可以实现iframe的功能。例如

1. Google的广告代码：http://blog.sina.com.cn/s/blog_4bec262601000947.html (因为没有办法访问到Google的网站，所以我找了一篇参考文档）
2. 网站分享边栏代码：http://www.jiathis.com/getcode

【备注】使用脚本的方式，前提是你完全信任这些脚本。而iframe唯一的好处在于它可以对外部页面的行为做限制（通过安全沙箱）

 

如果你仅仅是要动态插入另外一个网页的内容到当前网页上，你可以直接使用AJAX的方式，例如

1. get : http://api.jquery.com/jQuery.get/
2. load : http://api.jquery.com/load/