了解 iFrame 及其使用

已发表: 2022-04-06

iFrame 通常用于在网站上嵌入内容。 它们可能非常有用，但您也可能会遇到正确显示内容的问题。 在本文中，我们将更详细地了解 iFrame 到底是什么、如何使用它们以及如何解决您可能遇到的任何问题。

让我们跳进去。

iFrame 到底是什么？

iFrame 是“内联框架”的缩写。 其目的是将 HTML 内容嵌入到其他 HTML 内容中，并将其显示为网页元素。

嵌入源的内容看起来好像它是您网站布局的一部分，但它不是。 它可以是另一个网页、文档、视频或其他类型的交互式媒体。 iFrame 的一个常见用途是嵌入 YouTube 视频等内容。

iFrames 是一个 HTML 标签，早在 1997 年就已经存在了很长时间。尽管它们已经很老了，但它们仍然被普遍使用并受到所有现代浏览器的支持。

如何使用 iFrame

要创建一个简单的 iFrame，您必须使用 <iframe> HTML 元素并在src属性中设置源。 为此，请创建一个 html 文件，例如index.html 。 然后用你喜欢的编辑器打开它并插入以下代码：

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com"> </iframe> </body> </html>

现在，如果您使用浏览器打开文件，您应该会看到如下内容：

iFrame

如您所见，默认 iframe 大小不包括嵌入内容（在本例中为网页）的整个宽度，因此会自动出现滚动条，让您在窗口内导航。

现在让我们自己设置 iFrame 的宽度和高度：

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com" width="480" height="320" > </iframe> </body> </html>

刷新页面，看看它现在的样子。

带尺寸的 iFrame

使用 iFrame 时，还有许多其他选项可以配置。 最受欢迎和最有用的是：

  • name ：我们可以设置 Fframe 的名称，以便我们可以在 JavaScript 中使用它。
  • loading ：定义 iFrame 如何加载。 从“懒惰”、“渴望”或“自动”中选择。 例如，当使用 'lazy' 值时，当用户向下滚动页面到 iFrame 时会加载 iFrame。 这具有提高页面加载速度的效果。 'Eager' 会立即加载它，而 'auto' 让浏览器决定何时加载 iFrame。
 <!DOCTYPE html> <html> <body> <div class="wrapper"> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" loading="lazy"></iframe> </div> </body> </html>
  • sandbox ：此属性对 iFrame 中的内容设置一些限制，例如脚本执行、表单提交等。 您也可以为其中任何一个设置例外。 以下是一些限制：
    – 允许表格
    – 允许指针锁定
    - 允许弹出窗口
    – 允许同源
    – 允许脚本
    - 允许顶部导航
    – 允许模式

您可以通过添加沙盒属性来应用所有限制，或者您可以通过在代码中定义它来指定将排除上述哪些属性，如下所示：

 <!DOCTYPE html> <html> <body> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" sandbox="allow-forms allow-modals"></iframe> </body> </html>
  • allowfullscreen ：它执行它在锡上所说的操作，并允许 iFrame 在屏幕上完全打开。

要测试allowfullscreen ，您可以通过嵌入这样的 YouTube 视频进行尝试：

 <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe> </body> </html>

您会注意到右下角的全屏按钮仅在使用allowfullscreen属性时才起作用。 如果删除该属性，全屏按钮将变灰。

如何使 iFrame 响应式

您网站上的所有元素都是响应式的，这一点非常重要。 iFrame 也不例外。 为了确保 HTML iFrame 具有响应性，您必须首先从代码中删除宽度和高度属性，然后使用一些 HTML 元素和 CSS 代码，如下所示：

 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>

我们将 iFrame 包装在一个 div 元素中，并应用一些 CSS 来设置尺寸，以确保它在包括手机在内的所有屏幕上看起来都很好。

使用 Pressidium 托管您的网站

60 天退款保证

查看我们的计划

如果您现在在浏览器中测试屏幕宽度，您应该会看到 iFrame 响应式显示并且其纵横比保持不变。

注意：如果您不熟悉浏览器工具，您可能会发现 Chrome 的“响应式 Web 设计测试器”之类的扩展很有用。

使用 iFrame 的好处

iFrame 非常受欢迎，而且有充分的理由。 让我们来看看其中的一些原因：

共享外部媒体

在很多情况下，您可能希望共享外部媒体，但将访问者留在您的网站上，而不是将他们发送到第三方网站。 iFrames 允许您通过在您自己的网站上以用户友好的方式整合外部媒体来无缝地做到这一点。

自定义配置

在嵌入媒体（例如 YouTube 视频）时，大多数视频托管平台都会为您提供对该内容的显示方式的大量控制。 例如，您可以选择是否希望 iframe 中的视频在加载时自动播放，或者甚至无限循环播放视频。

保持隔离

iFrame 的另一个优点是它们不会干扰父文档（通常是嵌入它们的网站页面）。 这意味着 iFrame 不受您网站的 CSS 和/或 Javascript 的影响。

iFrame 的一些最流行的用途是：

  • 嵌入 Youtube 视频或 Twitter 时间线或 Spotify 播客播放列表
  • 通过包含天气预报将有关天气的信息拉到您的网站上
  • 添加 Google 地图位置

只要您要显示的源代码提供嵌入代码，您通常可以始终在 iFrame 内的站点上显示此代码。

使用 iFrame 的潜在缺点

不使用 iFrame 的主要原因之一是它们会增加您的网站遭受跨站点攻击的风险。

如果嵌入在 iFrame 中的源不可信，那么您就有可能遇到所谓的“恶意 iFrame 注入”，即攻击者将 iFrame 注入网页。 在 iFrame 注入攻击中，“恶意网站通常会利用可能危及最终用户机器的代码”。

因此，当使用 iFrame 在您的网站上嵌入内容时，该内容来自受信任的来源至关重要。 如果有疑问，请不要使用它。

使用 iFrame 的另一个缺点是它们会减慢您的网站速度，尤其是在您加载多个 iFrame 时。 然后，您的网站只会变得与必须加载的外部内容一样快。 作为预防措施，您可以使用前面讨论的加载属性。

结论

iFrame 在网站上被广泛使用，并且没有迹象表明这种情况很快就会停止。 如果您正确使用它们，它们可以成为增强您网站内容的绝佳工具。