小部件 - Iframe与JavaScript的区别

Question

我需要开发一个小部件，将被第三方网站使用。这不是一个部署在社交网络网站中的应用程序。我可以给网站提供一个链接作为iframe的src，或者我可以将其开发为JavaScript请求。

有人能告诉我这两种方法(IFrame与JS)之间的权衡吗？

- Abhi

Answer 1

我在搜索同样的问题时找到了这篇有趣的文章：
http://prettyprint.me/prettyprint.me/2009/05/30/widgets-iframe-vs-inline/

小部件是可以轻松添加到任何网页中的小型网络应用程序。它们有时被称为小工具，并且在越来越多的网页、博客、社交网站、个性化主页（如iGoogle、my Yahoo、netvibes等）中广泛使用。在这篇博客中，我使用了几个小部件，例如右侧的RSS计数器，显示订阅此博客的用户数量（不要担心，它会增长的，因为这是一个新博客;-)）。小部件非常棒，因为它们是小巧的可重用功能块，即使非程序员也可以利用它们来丰富其网站。

我写了几个这样的小部件，既包括“原始”小部件，可以嵌入到任何网站中，也包括更结构化的iGoogle小部件、worpress*、typepad和blogger小部件，所以我很乐意分享我的经验。

作为小部件作者，对于在客户端运行的小部件（简单可嵌入的HTML代码），您可以选择将小部件编写在iframe内部，或者将其直接内联到页面并使其成为托管页面的dom的一部分。本文的其余部分讨论了两种方法的优缺点。

技术上该如何实现？如何使用iframe或实现内联小部件？

Iframes有点更容易实现。以下示例呈现了一个简单的iframe小部件：http://my-great-widget.com/widgwt' width="100" height="100" frameborder='0'>。

frameborder = '0'用于确保ifrmae没有边框，因此在页面上看起来更自然。http://my-great-widget.com/widget负责作为完整的HTML页面提供小部件内容。

内联小部件可能如下所示：

function createMyWidgetHtml() { return "Hello world of widgets"; } document.getElementById('myWidget').innerHTML = createMyWidgetHtml();

正如您所看到的，函数createMyWidgetHtml()负责创建实际的小部件内容，并且不一定需要与服务器通信才能完成。在iframe示例中必须有一个服务器。在内联示例中，不需要有服务器，尽管如果需要，也可以从服务器获取数据，这实际上是非常常见的情况，小部件通常会调用服务器端代码。使用内联方法时，通过按需javascript调用来调用服务器端代码。

因此，总结一下，在iframe情况下，我们只需放置一个iframe HTML代码并将iframe源指向实际提供小部件内容的服务器位置即可。在内联情况下，我们使用javascript本地创建内容。当然，您可以将iframe与javascript组合使用，以及使用内联方法与服务器端调用，您不受此限制，但路径始终不同。

那么有什么大不同呢？有几个重要的区别，因此这篇文章开始了有趣的部分。

安全性。iFrame小部件更安全。

小工具会带来哪些风险，谁实际上面临风险？网站用户和网站声誉处于风险之中。

对于内联小部件，浏览器认为小部件代码的来源是托管站点。假设您正在浏览您喜欢的邮件应用程序http://my-wonderful-email.com，并且此邮件应用程序安装了一个小部件，该小部件显示来自http://great-clock-widgets.com/的时钟。如果该小部件作为内联小部件实现，则浏览器认为小部件的代码起源于my-wonderful-email.com而不

- Amr Elgarhy

Answer 2

为什么不两全其美呢？

我更喜欢给第三方网站提供像这样的脚本：

 <script type="text/javascript" src="urlToYourScript"></script>

你的服务器上的文件看起来像：

document.writeln('<iframe src="pathToYourWidget" 
name="MagicIframe" width="300" height="600" align="left" scrolling="no" 
marginheight="0" marginwidth="0" frameborder="0"></iframe>');

更新：

使用指向您服务器上的URL的iframe的一个劣势是，如果有人从指向您服务器的URL单击指向您服务器的URL，则不会生成“真正的”反向链接。

- john Smith

---

Google搜索引擎忽略来自小部件的反向链接。它目前足够智能，可以确定小部件并将这些链接设置为nofollow。 - CyberAleks

Answer 3

我相信很多开发人员/网站所有者都会希望一个他们可以根据自己的需求来设置样式的Javascript解决方案，而不是使用iframe。如果我要从第三方包含组件，我宁愿通过Javascript来做，因为我会有更多的掌控权。

就易用性而言，两者都非常简单，因此在这方面没有真正的平衡取舍。

另外，确保为您托管此域名获取SSL证书，并相应地编写包含语句，以便在页面通过SSL提供服务时。如果您的网站所有者有使用SSL的理由，他们一定会很感激，因为Firefox和其他浏览器会抱怨页面中混合了安全/非安全内容。

- wsanville

Answer 4

如果小部件可以嵌入iframe，对于托管站点的前端性能来说会更好，因为iframes不会阻塞内容下载。但是，正如其他人评论的那样，使用iframes也有其他缺点。

如果您使用javascript实现，请在开发时考虑前端性能最佳实践。特别是，您应该查看非阻塞javascript加载。Google分析和其他第三方小部件提供商支持这种加载方法。如果您可以将javascript加载到页面底部，这也会有所帮助。

- timmow

Answer 5

很高兴知道它不会部署在社交网络网站上...这只留下了其他的网站 ;-)

什么最有用取决于您的小部件。IFrame和JavaScript通常具有完全不同的目的，可以混合使用（即iframe内的javascript或javascript创建一个iframe）。

• IFrames存在尺寸问题;如果它应该恰好适合页面，请问您是否知道它在所有浏览器上呈现相同，数据是否会溢出其容器等？
• IFrames很简单。它们可以是简单的静态HTML页面。
• 使用IFrames时，您会非常明显地暴露您的小部件。
• 但是，为什么不让第三方网站简单地包含给定URL的HMTL？然后，当/如果您需要时，可以扩展HTML以包含javascript。
• 纯JavaScript提供了更多的灵活性，但需要付出一些复杂性的代价。

- tommym

---

使用iFrame而不是JavaScript的另一个好处是，它所需的任何CSS或Javascript都是自包含的，不会干扰调用网站。当然，您可以通过使用非通用选择器轻松解决此问题。 - Noz

在iframe中，您可以使用SLL，在JavaScript中，父网站必须安装SSL。 - Yehia A.Salam

Answer 6

iframes的优点是：所有CSS和JS都与主机页面分离，因此您现有的CSS可以直接使用。(如果您希望主机网站为您的内容设置样式以适应页面，则这是一个缺点。)

iframes的缺点是：它们具有固定的宽度和高度，如果您的内容更大，则会出现滚动条。

- mb21