Widget-Iframe与JavaScript

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

---

有人能告诉我这两种方法（IFrame和JS）之间的权衡吗？

很高兴知道它不能部署在社交网站上。。。只剩下网络的其余部分；-）

什么最有用取决于您的小部件。iframe和javascript通常有完全不同的用途，可以混合使用（即iframe中的javascript，或者创建iframe的javascript）

• IFrames遇到了大小问题；如果它被认为是完全适合页面的，你知道它在所有浏览器上都呈现相同的效果，数据不会溢出它的容器等吗
• Iframe很简单。它们可以是一个简单的静态HTML页面
• 使用iFrame时，您可以非常清楚地公开小部件
• 但话说回来，为什么不让你的第三方网站在一个给定的url上包含HMTL呢？如果需要，HTML可以扩展为包含javascript
• 纯Javascript允许更大的灵活性，但代价是一些复杂性

---

我在搜索同一个问题时发现了这篇有趣的文章：

小部件是可以轻松添加到任何web应用程序的小型web应用程序 页它们有时被称为小玩意，被广泛用于种植业 网页、博客、社交网站、个性化主页等的数量 作为iGoogle、MyYahoo、netvibes等，我在这个博客中使用了几个 小部件，例如右侧的RSS计数器，它显示了多少个 用户订阅了这个博客（别担心，它会增长的，这是一个好消息） 新博客；-））。小部件之所以伟大，是因为它们很小 即使是非程序员也可以利用的可重用功能 丰富他们的网站

在过去的一段时间里，我已经编写了几个这样的小部件，它们都是“原始”小部件 它可以嵌入到任何网站以及iGoogle小工具中 更结构化的worpress*、typepad和blogger小部件，所以我很高兴 分享我的经验

作为小部件作者，对于在客户端运行的小部件（简单 可嵌入HTML代码）您可以选择编写小部件 在iframe中，或者直接内联页面并使其成为dom的一部分 主机页面的。文章的其余部分讨论了利弊 这两种方法都有

技术上是如何做到的？如何使用iframe或如何实现 内联小部件

iFrame更容易实现。下面的例子 呈现一个简单的iframe小部件：http://my-great-widget.com/widgwt'width=“100”height=“100” frameborder='0'>

frameborder='0'用于确保ifrmae没有边框 所以在页面上看起来更自然。这个 负责小部件的服务 内容作为一个完整的HTML页面

内联小工具可能如下所示：

函数createMyWidgetHtml（）{返回“小部件的你好世界”；} document.getElementById（'myWidget'）。innerHTML=createMyWidgetHtml（）； 如您所见，它负责的函数createMyWidgetHtml（） 创建实际的小部件内容，而不必 与服务器对话以完成此操作。在iframe示例中，必须有 服务器。在内联示例中，不需要服务器， 虽然如果需要，也可以从服务器获取数据 实际上这是一种非常常见的情况，小部件通常会调用服务器端 代码。使用内联方法，服务器端代码通过 在DemmandJavaScript上

总之，在iframe的例子中，我们只需放置一个iframe HTML 编码并将iframe的源指向 实际上服务于小部件的内容。在内联情况下，我们 使用javascript在本地创建内容。你当然可以合并 iframe与javascript的结合使用以及内联方法的使用 对于服务器端调用，您不受此限制，而是受路径限制 从不同的角度出发

那有什么大不了的？有什么区别？有几个 重要的区别，所以这里开始有趣的部分 邮局

安全。iFrame小部件更安全

小玩意会带来什么样的风险？谁会真正处于风险之中？这个 网站的用户和网站的声誉都有风险

对于内联小工具，浏览器认为小工具的源 代码来自托管站点。假设您正在浏览 您最喜欢的邮件应用程序和此 邮件应用程序安装了一个小部件，显示来自 . 如果该窗口小部件作为 内联小部件浏览器认为小部件的代码起源于 my-Wonder-email.com，而不是在great-clock-widgets.com，因此 让小部件的代码最终访问用户拥有的cookie my-Wonder-email.com和该小部件的邪恶作者将窃取您的 电子邮件。重要的是要意识到浏览器不关心在哪里 托管javascript文件；只要代码在同一台计算机上运行 框架时，浏览器会将所有代码视为框架底部的原始代码 域名。因此，作为一个用户，你会因为失去对电子邮件的控制而受到伤害 帐户和我的精彩电子邮件因失去声誉而受损

如果相同的时钟在iframe中实现，并且 iframe源不同于页面源（即 常见情况，例如，页面来源是my-wonderful-email.com和 gadget源代码是great clock widgets.com），则浏览器不会 允许时钟小部件访问页面cookie，也不允许 访问托管文档的任何其他部分，包括主机 页

 <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>');