iframe

经典真题

iframe 框架有哪些优缺点？
iframe 用来干什么的

iframe 介绍

iframe 称之为嵌入式框架，嵌入式框架可以把一个完整的网页内容嵌入到现有的网页中。

下面是一个 iframe 的简单示例：

<body>
    <p>iframe 示例</p>
    <iframe src="https://juejin.cn/"></iframe>
</body>

效果：

可以看到，在当前的网页，又嵌入了一个其他页面。

那么这在实际开发中有啥意义呢？

实际上，在早期的时候， iframe 在开发中用得很多。使用 iframe 可以很方便的制作一个页面的公共部分，例如导航栏。

现在仍然能够找到使用 iframe 的网站（大多是旧的项目）

例如 W3C school：

再比如邮箱：

但是随着 Ajax 的出现，iframe 用得越来越少了。现在在某些特定的场景还能见到，比如模拟窗口，邮箱或者 HTML 在线编辑器等。

究其原因，是因为 iframe 有种种不便，比如一个直观的问题就是 iframe 的自适应高度，这是处理起来比较麻烦的问题，随便百度下都是一大串的代码。

另外还有个重大的缺点，那就是搜索引擎的“爬虫”程序无法解读这种页面，当“爬虫”遇到多个页面嵌套的网页时只看到框架却找不到链接，然后认定此网站是死站点并离开。这对于 SEO 来讲无疑是毁灭性的打击。并且使用大量的 iframe 标签也会稀释你该页面的关键词密度并对其产生影响。

真题解答

iframe 用来干什么的？有哪些优缺点？

参考答案：

iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

方便制作导航栏

缺点

会产生很多页面，不容易管理

调用外部页面，需要额外调用 CSS，给页面带来额外的请求次数

会阻塞页面的加载，window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发

浏览器的后退按钮无效

无法被一些搜索引擎索引到

多数小型的移动设备（PDA 手机）无法完全显示框架

由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃，目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 框架了。

-EOF-