什么是iFrame及如何正确地使用它

随着网站变得越来越复杂，WordPress用户需要一种在他们自己的页面上显示第三方内容的方法才有意义。幸运的是，有一个名为iFrame的HTML元素可以帮助您做到这一点。

在这篇文章中，我们将解释什么是iFrame以及何时最好使用iFrame。我们还将讨论此元素对WordPress用户的好处，并向您展示如何通过Divi Builder模块轻松整合它。

什么是iFrame？

您可以将内嵌框架（或iFrame）视为网页上的一个窗口，可查看另一段在线内容。更技术性的描述方式是将HTML文档嵌入到另一个HTML文档中：

在代码方面，每个iFrame都包含<iframe> HTML标签以及一个src属性，以帮助指示您要嵌入网站的内容的位置。但是，您还可以合并其他属性来指定“window”本身的尺寸。

例如，下面是上面屏幕截图中简单示例iFrame的代码：

<iframe src="https://www.domain.com" height="630" width="1920"></iframe>

在这种情况下，<iframe> 标记包括要显示的页面的URL，以及以像素为单位的窗口的高度和宽度。您可以合并其他属性以启用功能策略 ( allow )、全屏模式 ( allowfullscreen )、付款 ( allowpaymentrequests ) 等。

需要注意的是，HTML5不支持许多iFrame属性（例如scrolling）。因此，请确保在手动编码iFrame时使用最新信息。

什么时候应该使用iFrame？

对于大多数非开发WordPress用户来说，iFrame的主要目的是在您的网站上显示第三方内容。一些常见用途包括：

• 广告。许多侧边栏和横幅广告实际上是 iFrame。这使您的广告合作伙伴能够轻松提供和维护他们付费显示在您网站上的内容。
• YouTube视频。YouTube或者其他视频网站嵌入代码利用iFrame在您的页面上显示托管在其平台上的视频。使用这种技术，您不必担心将视频上传到您的媒体库。
• 谷歌地图。如果您曾经从餐厅订购过外送食物，那么在选择最近的商店位置时，您可能已经看到了Google地图iFrame。不幸的是，谷歌已经用它的Maps API Key替换了它，所以新用户不能通过iFrames嵌入地图。
• 社交媒体帖子。显示您最近的社交媒体帖子的一种方法是通过iFrame。这很方便，因为它们会自动更新以包含喜欢、评论和其他动态元素（我们将在稍后解释）。
• RSS Feed。就像不断变化的社交媒体帖子一样，RSS有时更容易使用iFrame显示。您只需使用RSS Feed的URL作为src属性。

还有几个更复杂的用例，例如开发单点登录系统或所见即所得 (WYSIWYG) 文本编辑器。例如，TinyMCE编辑器（以前是WordPress默认内容创建界面）使用iFrame。

使用iFrame有什么好处（优缺点）？

对于大多数用户来说，iFrame是有益的（优点），因为它们将主要HTML文档（您的站点）与您加载到其中的外部内容保持分离。这有两个原因。首先，您不必担心更新要显示的第三方内容。您的广告合作伙伴可以更改他们的促销活动，您的Facebook Feed可以刷新，并且Google地图可以根据新的住房开发进行调整。您的iFrame将加载最新版本。

以我们在本文开头使用的介绍性示例为例。它目前包括Divi促销广告。但是，一旦促销结束，iFrame将显示我们的标准主页，而没有横幅。

此外，保持您的内容与其他网站的内容之间的分离可以提供额外的安全性。您不必担心通过将第三方代码直接添加到您站点的文件中而无意中导入任何漏洞或错误。

即便如此，仍有许多开发人员反对使用iFrame，因为它们也有其缺点，可能带来安全风险。您在“Windows”中加载的文档中的任何恶意元素也将在您的站点上可用。第三方可以借此机会“钓鱼”用户数据。

但是，如果您从Google、YouTube和流行的社交媒体或新闻平台等信誉良好的来源采购第三方内容，这应该不是问题。与往常一样，在将新功能整合到您的网站时要有选择性。

在WordPress网站上合并iFrame

如果您想在WordPress网站上使用iFrame，Divi可以提供帮助。我们的一些模块特别适合容纳这个方便的HTML元素，并且可以让您更轻松地使用它。您可以立即开始使用以下三个。

1. 视频模块

正如我们上面提到的，iFrame最常见的用途之一是在您的网站上显示YouTube视频。实际上，当您使用Divi视频模块时，它只是在幕后执行此操作：

当您将外部视频的URL添加到Divi模块时，它会自动生成一个iFrame来显示它。如果您不想输入<iframe>标记和属性，这是实现相同结果的快速简便的方法。

2. 代码模块

当然，您始终可以选择使用Divi代码模块来合并自定义代码。这是一种手动输入<iframe>标签和属性的简单方法 ，或者使用第三方嵌入代码中包含的iFrame。

我们将使用Facebook帖子作为示例。通过单击要显示的帖子右上角的三点图标并选择Embed来检索嵌入代码：

然后复制iFrame的代码并将其添加到您的Divi代码模块中：

在您发布或更新页面后，您的iFrame现在将在Divi Builder和您网站的前端显示您的Facebook帖子。

小结

有这么多有用的方法可以在网络上与人们联系和共享信息，因此您可能希望将第三方内容（例如YouTube视频）拉到您自己的网站上是有道理的。因此，iFrame旨在帮助您做到这一点，同时将您的内容与外部来源分开。

如果您认为iFrame可能是您网站的有用解决方案，以下Divi Builder模块可以帮助您快速轻松地整合一些最流行的内容类型：

1. 视频模块：使用视频页面的URL快速生成YouTube iFrame。
2. 代码模块：制作您自己的iFrame或粘贴来自Facebook等平台的第三方嵌入代码。

不过，除非必须，否则不要在页面使用IFrame，毕竟整个用户体验都不那么友好，再者各大搜索引擎也不太喜欢iframe。所以，能不用则不用吧！