iframe 称为嵌入式框架，会将一个完整的网页内容嵌入到现有的网页中。
<p>iframe 嵌入网站</p>
<iframe src="https://www.juejin.cn" width="100%" height="500px"></iframe>
应用场景用得较少。比如模拟窗口、邮箱、html 在线编辑器。
它有很多不便，比如：处理自适应高度、爬虫无法爬取内容。
1. 基本用法
<iframe src="example.html" width="500" height="300" frameborder="0" scrolling="auto"></iframe>
src属性指定要嵌入的文档的 URL。width和height属性定义<iframe>的宽度和高度。frameborder属性指定是否显示<iframe>周围的边框，常见值为0（不显示）和1（显示）。scrolling属性指定<iframe>是否具有滚动条，可选值为yes、no和auto。
2. 目的
- 嵌入外部网页：可以在当前页面中嵌入其他网页，使用户可以直接在当前页面中访问其他网站的内容。
- 保持内容的独立性：可以在一个 HTML 页面中嵌入另一个 HTML 页面，使它们保持独立的加载和渲染，相互之间不会影响。
3. 特性
- 独立性：
<iframe>中的文档是独立于父文档的，即使<iframe>中的文档被修改或加载，父文档也不会受到影响。 - 跨域访问：
<iframe>允许在不同域名的文档之间进行通信，但是在跨域通信时需要注意安全性。 - 可交互性：
<iframe>中的内容可以与父文档进行交互，通过 JavaScript 等方式，可以在父文档和<iframe>之间进行通信和数据传递。
4. 注意事项
- SEO 问题：搜索引擎可能不会索引
<iframe>中的内容，因此在 SEO 优化时需要注意。 - 安全问题：
<iframe>可能会被用于执行跨站脚本（XSS）攻击，因此需要注意安全性，避免加载不可信的内容。 - 产生很多页面，不容易管理
- 调用外部页面，需要额外调用 css，带来额外的请求次数
- 阻塞页面的加载，window 的 onload 事件需要在所有 iframe 加载完毕之后才会触发
- 浏览器的后退按钮无效
- 多数小型移动设备无法完全显示框架
5. 用途示例
- 在网页中嵌入在线地图或其他第三方服务。
- 在网页中嵌入广告或视频播放器。
- 实现网页中的一部分动态加载，提升用户体验。
