iframe 介绍

大约 1 分钟

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

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

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

效果：

可以看到，在当前网页中嵌入了另一个网页。

iframe 的实际意义

在早期的开发中，iframe 使用非常广泛。使用 iframe 可以方便地制作页面的公共部分，例如导航栏。现在仍然可以找到使用 iframe 的网站（大多是旧项目）。

例如:

随着 Ajax 的出现，iframe 的使用逐渐减少，但在某些特定场景下依然能见到，例如模拟窗口、邮箱或 HTML 在线编辑器等。

iframe 的优缺点
iframe 有其优点和缺点：

重载页面时不需要重载整个页面，只需重载一个框架页（减少了数据传输，提高网页下载速度）。

方便制作导航栏。

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

调用外部页面需要额外调用 CSS，增加请求次数。

会阻塞页面加载，window 的 onload 事件需要在所有 iframe 加载完毕后才会触发。

浏览器的后退按钮无效。

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

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

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