专注国内外云服务器
分享建站技术教程

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

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

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

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

什么是iFrame?

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

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

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


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

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

什么时候应该使用iFrame?

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

还有几个更复杂的用例,例如开发单点登录系统或所见即所得 (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来显示它。如果您不想输入标记和属性,这是实现相同结果的快速简便的方法。

2. 代码模块

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

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

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

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

小结

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

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

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

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

微海报分享

文章来源于互联网:什么是iFrame及如何正确地使用它

相关推荐: 如何实现WordPress侧边栏最新文章显示/不显示某分类文章?

默认情况下,我们的WordPress站点侧边栏显示的最新文章一般都是显示所有分类的post文章(PS:若想显示自定义文章类型请参考『如何实现WordPress侧边栏最新文章显示自定义文章类型的文章?』),不过有时候我们需要设置最新文章只显示某几个分类或者不显示…

赞(0)
未经允许不得转载:吾上云 » 什么是iFrame及如何正确地使用它
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们