Javascript 小部件(类似于 Facebook Like)脚本 vs Iframe 方法

Question

在构建用于其他网站的社交书签按钮小部件时，存在一些挑战。我们最近刚刚开源了这方面的客户端方面。 (博客文章在这里:http://www.mellowmorning.com/2010/08/03/creating-your-own-diggfacebook-liketweetmeme-button/)

基本上目标是替换选择的元素爱它用一个按钮显示有多少人喜欢它。

有两种方法可以做到这一点。- 用 html 替换 A(脚本方法)- 用 iframe 替换 A(iframe 方法)

这些方法之间存在相当复杂的差异。一个特别烦人的问题是脚本方法无法与其弹出窗口进行通信。

任何人都可以建议一种解决方法来在登录弹出窗口和按钮之间进行通信。 (IE。当你通过弹出窗口喜欢某个东西时？，你如何更新按钮上的计数，而不会被同源保护阻止..)

您推荐哪种方法。 iframe 或 Script，为什么？

这些是我遇到的区别:Iframe vs Script

内嵌框架:

• 可以弹出通信由于同源限制，脚本方法无法与其创建的弹出窗口通信。然而，iframe 可以与弹出窗口属于同一域并且可以自由通信。这在例如登录时提供了更好的用户体验。
• 更容易开发iframe 方法更易于开发并且需要的代码更少。
• 在 IE 中并行下载IE 不会并行下载计数脚本，但它会为 IFRAME 这样做。使这种方法更快一些。
• 独立的 CSS如果您使用 iframe 技术，外部站点不会干扰您按钮的 css。缺点是它使悬停之类的东西无法与其他站点集成。 (例如 Fashiolista 的紧凑型按钮)。
• 独立iframe 方法使其他站点很难玩弄用户喜欢/喜欢的操作。使用脚本方法，外国站点可以简单地调用您的 javascript 来假冒喜欢该产品的人。这种自由可能会被滥用，但也允许混搭。

脚本:

• 较慢的 dom 加载创建 iframe 需要浏览器花费更多时间。
• 较慢的感知负载脚本方法允许您在加载数据之前格式化按钮。大幅提高感知加载速度。
• 没有共享功能按钮不能共享功能。因此，当有人登录一个按钮时，不可能更新其他按钮。

Answer 1

当然还有第三种选择，它是 iframe 和脚本方法的混合体。

您可以使用脚本挂接到页面 DOM(在不同用途方面提供大量自由)，并创建指向您的域的隐藏 iframe。

该脚本可以与当前文档通信，也可以使用跨域消息传递与您的文档通信，然后使用 iframe 作为代理与弹出窗口通信。

当然，XDM 确实会带来一些困难，但是如果您使用经过验证的解决方案，例如 easyXDM ，那么问题应该不大。

Here is an example展示了如何与弹出窗口进行交互。