iframe从入门到入门

iframe从入门到入门

引用

CSDN

1.

https://blog.csdn.net/Dd_ddc/article/details/141138102

iframe是HTML中用于在一个网页中嵌入另一个网页的元素，它的全称是“inline frame”。通过iframe，你可以在一个页面中显示来自其他网站的内容，或者在同一网站内加载其他页面。本文将从概念、结构、属性、优缺点等多个维度全面介绍iframe的使用方法和应用场景。

概念

iframe 是 HTML 中用于在一个网页中嵌入另一个网页的元素。它的全称是 “inline frame”。通过 iframe，你可以在一个页面中显示来自其他网站的内容，或者在同一网站内加载其他页面。

iframe 的基本结构

<iframe src="URL" width="宽度" height="高度" frameborder="边框" allowfullscreen="允许全屏" name="名字"></iframe>

常用属性

属性 说明 例子
frameborder 设置是否显示 iframe 的边框。值为 0 表示无边框，1 表示有边框。 frameborder=“0”
allowfullscreen 允许 iframe 内容全屏显示。 allowfullscreen
name 给 iframe 一个名字，用于在同一页面中多次引用它。 name=“myframe”
sandbox 提供一系列安全选项，限制 iframe 内内容的行为 sandbox=“allow-scripts”

其中，sandbox 属性的常见值包括：

1. allow-same-origin: 允许 iframe 读取和写入自己的文档内容（跨域时无效）。
2. allow-scripts: 允许执行 JavaScript。
3. allow-forms:允许提交表单。
4. allow-top-navigation：允许 iframe 导航到父窗口的顶级页面。

优缺点

优点

1. 内容隔离: iframe 可以将嵌入内容与父页面隔离开来，这意味着嵌入的内容不会直接影响父页面的布局或样式。这种隔离对于嵌入第三方内容（如广告、视频、地图）非常有用，因为你不需要担心外部内容干扰你的网站。
2. 加载优化: iframe 的内容是独立加载的，这意味着在 iframe 内嵌入的内容不会阻塞主页面的加载。主页面可以先加载和显示，嵌入内容可以稍后加载，提升用户体验。
3. 跨域嵌入: iframe 可以用来嵌入来自其他域的内容，即使这些内容与当前网站不在同一域名下，这在某些集成场景中非常有用。
4. 内容更新方便: 通过 iframe 嵌入的内容可以独立更新，而不影响父页面的其他内容。这使得内容管理和更新更加方便。
5. 多源展示: 你可以在一个页面中同时展示来自多个来源的内容，这在展示不同类型的数据（例如社交媒体嵌入、新闻片段）时非常有用。

缺点

1. 安全问题: iframe 可能引入安全风险，尤其是当嵌入来自不可信来源的内容时。这可能会导致 XSS（跨站脚本攻击）或 Clickjacking（点击劫持）等安全漏洞。因此在嵌入外部内容时需要谨慎，建议使用 sandbox 属性限制其行为。
2. 不易调整样式: iframe 内的内容相对独立，因此你无法轻松地通过父页面的 CSS 或 JavaScript 来控制 iframe 内的样式或内容。这使得在调整 iframe 的外观和行为时可能遇到困难。
3. SEO（搜索引擎优化）问题: 搜索引擎可能不会索引 iframe 中的内容，这可能会影响页面的 SEO 效果。嵌入的重要内容时要特别注意这一点。
4. 响应式设计问题: 虽然可以使用一些技巧使 iframe 响应式，但与直接控制内容相比，还是存在一些限制。尤其是在移动设备上，确保 iframe 内容适应不同屏幕大小可能需要额外的工作。
5. 加载速度: 如果嵌入的内容较大或者来自于慢速服务器，iframe 可能会拖慢页面的整体加载速度，影响用户体验。

案例

iframe嵌入Google地图

地址在谷歌地图的share里面的Embed a map复制

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235816.55164076661!2d113.88906948910096!3d22.555393423720552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2sus!4v1723453055387!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

iframe嵌入b站视频

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=2271112&bvid=BV1es411D7sW&cid=3540266&p=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen width="560" height="315"></iframe>