Javascript小部件（类似于Facebook）脚本与Iframe方法

当构建一个用于其他网站的社交书签按钮小部件时，有一些挑战。我们最近刚刚公开了这方面的客户端。（这里的博客帖子：）

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

这有两种方法。 -将A替换为html（脚本方法） -用iframe（iframe进近）替换A

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

任何人都可以建议一种解决办法，以便在登录弹出窗口和按钮之间进行通信。（即，当您通过弹出窗口爱上某样东西时，您如何更新按钮上的计数，而不被同源保护所阻止……）

你推荐哪种方法。Iframe或脚本，为什么

以下是我遇到的差异：Iframe与Script

Iframe：

• 可能的弹出式通信 由于同源限制，脚本方法无法与它创建的弹出窗口通信。但是，iframe可以与弹出窗口属于同一域，并且可以自由通信。例如，登录时，这会提供更好的用户体验
• 易于开发 iframe方法更易于开发，并且需要的代码更少
• IE中的并行下载 IE不会并行下载count脚本，但它会为iFrame下载。使这种方法更快一些
• 独立CSS 如果使用iframe技术，外部站点不会干扰按钮的css。缺点是它使得像Hover这样的东西无法与其他站点集成。（例如Fashiolista的compact按钮）
• 独立的 iframe方法使得其他网站很难让用户喜欢/喜欢动作。使用脚本方法，外国网站可以简单地调用您的javascript来假装有人喜欢该产品。这种自由可以被滥用，但也允许mashup

脚本：

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

---

当然还有第三种选择，它是iframe和脚本方法的混合
您可以使用脚本连接到页面DOM中（根据不同的使用提供了大量的自由），并创建一个指向您的域的隐藏iframe
该脚本既可以与当前文档通信，也可以使用跨域消息与您的文档通信，然后使用iframe作为代理与弹出窗口通信
当然，XDM确实会带来一些困难，但是如果您使用一个经过验证的解决方案，比如，那么它应该不会有太大的问题
这显示了如何与弹出窗口交互。
基本上有两个问题 -哪种方法最好 -脚本方法面临的弹出式通信困难的解决方法
谢谢你的弹出信息！ 支持这些跨域弹出窗口的底层技术是什么
如果我正确理解您的第三个选项： -国外网站加载我们的js -js替换dom元素 -js打开隐藏的iframe到自己的域

---

然后我如何打开一个弹出窗口，它仍然允许与加载到国外站点的js进行通信？为此，弹出窗口需要由iframe实例化，对吗？我们需要一种与iframe通信的方法。我想除了设置iframe的window.location.href之外，我不允许对iframe做任何事情。您能解释一下它是如何工作的吗？
以及您在这里寻找的确切答案是什么？哪种方法最好？蒂埃里的回答是对你问题的回答。他是我的同事，他实际上编写了代码（他只是以前没有SO帐户）。easyXDM是提供XDM的库，在页面和弹出窗口之间传递消息只是它的一个用例。弹出窗口可以通过任何一个页面打开，但最安全的方法是在用户操作上打开，以避免阻止程序，因此您可能必须在“消费者”上打开。在那之后，只需将弹出窗口连接到隐藏的框架，就可以开始了。看看这个例子：，这是easyXDM的一个开发版本，使这变得简单。还有，看看我现在在做什么。事实上，我似乎已经打破了开发示例：）嘿，肖恩，当前版本和开发版本都是。并且目前不为我工作（chrome）。另外，哪种传输类使我能够通过iframe与弹出窗口通信？如果您有3个元素，页面中的脚本、页面中的iframe和弹出窗口。弹出窗口无法到达页面或iframe右侧。并且该页面只能设置iframe.location.href。（至少据我所知）。您使用哪种技术来启用此功能？（或easyxdm代码中的传输类。）顺便说一句，easyxdm代码看起来非常干净！查看我的新项目（请参阅此处的基本示例），以轻松集成所有这些组件。所示示例不使用弹出窗口，但如果将开关UseModel切换为false，则它将正常工作。这个项目是一个构建Api的框架，所以它应该给你一些线索。