使用Iframes与脚本来嵌入组件的教程

336 阅读4分钟

Iframe和脚本,什么是更好的选择?

你是否曾经尝试过将外部网站的图片、视频或整个部分嵌入到你的网络应用中?虽然有各种方法,但找到适合你使用情况的方法是至关重要的。

在这些方法中,IFrame和脚本标签脱颖而出。它们都允许动态地嵌入内容。

在这篇文章中,我将讨论它们的区别以及何时使用它们。

本文的最后一节将讨论独立组件作为任何形式的前端集成的正确构件,无论是使用iframe还是脚本标签。

Iframe中的 "I "代表Inline,Iframe元素或内联框架用于嵌入一个外部对象,如一个HTML文档在当前对象中

你可能已经多次使用它,同时在你的网页上添加小工具,如著名的Facebook-like按钮,YouTube视频,或广告部分。

例如,下面的代码将显示一个500px的广场,其中包括一个YouTube视频。

<iframe 

脚本标签

在大多数情况下,

脚本标签可以用来直接将JavaScript嵌入到网页中,或者指定一个包含JavaScript的外部文件。

下面的代码是一个例子,说明如何使用

<script type=“text/javascript”>

如果你想包含一个包含JavaScript的外部文件,你可以按以下方法修改代码:

<script 

现在你对什么是脚本和Iframe标签有了相当的了解,让我们来看看它们各自比对方有哪些优势。

什么时候应该选择IFRames?

诚然,大多数开发者不喜欢使用Iframes。但它肯定有一些我们应该注意的优势。

提供你需要的安全性

当你使用一个Iframe时,你主要是处理来自第三方的内容,你无法控制它。这总是会增加你的应用程序中出现潜在漏洞的风险。

Iframe元素本身并不对你的网站或网站的访问者构成安全风险。

Iframe得到了负面的声誉,因为恶意网站可以利用它们将一个看不见的Iframe注入你的网页,将你的网站变成一个僵尸网络。

然而,Iframes被认为是比脚本更安全的方法,因为使用Iframes比包括一个直接访问你的DOM树的外部JavaScript更好。

在使用Iframes时,你可以使用像 '沙盒'允许 ,将特定的功能列入黑名单或白名单,以处理不良的用户体验,如恼人的视频自动播放。

不阻止渲染

浏览器倾向于等待,直到所有的脚本被下载和执行后再下载其他东西。这就是所谓的阻断行为,正因为如此,脚本对你的网页性能有负面影响。

但是,有些时候,有必要进行这种阻断。因此,作为降低性能的解决方案,我们可以使用Iframes来与网页中的其他组件并行地加载内容。

例如,如果你想让你的网页先加载内容,然后再加载广告,可以用Iframe来完成。

什么时候应该选择脚本

既然我们已经看了Iframe比脚本多出的一些独角兽和彩虹,现在让我们来看看脚本比Iframe多出的优势。

脚本带来了你需要的响应性

Iframes并不完全是响应式的。你可以让你的网页中的Iframe容器响应,但不能让它所显示的内容响应。在大多数情况下,Iframe内的内容遵循原始网站中定义的尺寸。

而且,Iframe并不被所有的浏览器所支持,可能会不正常地显示,甚至是作为一个空白页面。

另一方面,脚本有助于解决IFrame的响应性问题,并支持所有重要的浏览器和不同的设备。

相对较少的加载时间和更好的SEO支持

在加载时间方面,脚本远远领先于Iframes。Iframes在收到响应后总是会再次调用服务器,随着应用程序的增加,这种额外的往返会大大增加加载时间。

例如,一个页面上的N个框架导致一个页面至少要对服务器进行N+1次调用,这就增加了往返次数、通信和运输成本。

除此之外,这对SEO得分也有很大影响,因为通过Iframes显示的内容可能不会被索引,也不能出现在谷歌的搜索结果中。

因此,与Iframes相比,脚本对服务器的负荷较小,具有较高的SEO得分。

为运行时集成独立开发组件

你如何为任何种类的前端集成创建构件?你如何在一个单一的组件上进行开发和协作?你如何确保该组件在其未来的主机应用中运行良好?

独立组件是指独立编写、渲染、版本控制和协作的组件。它们是用Bit开发和管理的,在Bit工作区,提供了一个非常简化的类似于monorepo的开发体验。也就是说,你可以独立地开发、发布和交付每个组件,但你是在一个允许你开发_多个_独立组件并跟踪它们的依赖关系的环境中这样做的。