Javascript 小部件（类似于 Facebook Like）脚本与 Iframe 方法
在构建用于其他网站的社交书签按钮小部件时，存在一些挑战。我们最近刚刚开源了客户端方面的资源。 （博客文章在这里：http:// www.mellowmorning.com/2010/08/03/creating-your-own-diggfacebook-liketweetmeme-button/）
基本上目标是替换所选元素 爱它 有一个按钮显示有多少人喜欢它。
有两种方法可以实现这一点。 - 将A替换为html（脚本方法） - 用 iframe 替换 A（iframe 方法）
这些方法之间存在相当复杂的差异。一个特别令人烦恼的是脚本方法无法与其弹出窗口进行通信。
任何人都可以建议一种解决方法来在登录弹出窗口和按钮之间进行通信。 （即，当您通过弹出窗口喜欢某些内容时？如何更新按钮上的计数，而不会被同源保护阻止......）
您推荐哪种方法。 iframe 或 Script 以及为什么？
这些是我遇到的差异： Iframe vs Script
Iframe:
- Popup communications possible 由于同源限制，脚本方法无法与其创建的弹出窗口进行通信。然而，iframe 可以与弹出窗口属于同一域并自由通信。这在例如登录时提供了更好的用户体验。
- 更容易开发 iframe 方法更容易开发并且需要更少的代码。
- IE 中并行下载 IE 不会并行下载计数脚本，但它会对 IFRAME 执行此操作。使这种方法更快一些。
- 独立CSS 如果您使用 iframe 技术，外部站点不会干扰按钮的 CSS。缺点是它使得悬停之类的东西无法与其他站点集成。 （例如 Fashiolista 的紧凑按钮）。
- 独立的 iframe 方法使得其他网站很难欺骗用户喜欢/喜欢的操作。通过脚本方法，外国网站可以简单地调用您的 JavaScript 来假装喜欢该产品的人。这种自由可能会被滥用，但也允许混搭。
脚本：
- dom 加载速度较慢 创建 iframe 需要浏览器花费更多时间。
- 感知负载较慢 脚本方法允许您在加载数据之前格式化按钮。大大提高感知的加载速度。
- 没有共享功能 按钮不能共享功能。因此，当有人登录一个按钮时，就不可能更新其他按钮。
When building a social bookmarking button widget for usage in other websites there are a few challenges. We just recently opensourced the clientside aspects of this. (blog post here: http://www.mellowmorning.com/2010/08/03/creating-your-own-diggfacebook-liketweetmeme-button/)
Basically the goal is to replace the chosen elements
love it
With a button showing how many other people loved it.
There are two approaches to this.
- replace the A with html (script approach)
- replace the A with an iframe (iframe approach)
There are rather complicated differences between these approaches. One particularly annoying is the inability for the script approach to communicate with its popup.
Can anyone suggest a workaround to communicate between the login popup and the button. (IE. when you love something through the popup?, how do you update the count on the button, without being stopped by same origin protection..)
Which approach do you recommend. Iframe or Script and why?
These are the differences I encountered: Iframe vs Script
Iframe:
- Popup communication possible
The script approach cannot communicate with popups it creates due to the same origin restrictions. The iframe however can be of the same domain as the popup and freely communicate. This gives a better user experience when for instance logging in. - Easier to develop
The iframe approach is easier to develop and requires less code. - Parallel download in IE
IE doesn’t download the count scripts in parallel, but it does do so for the IFRAMEs. Making this approach somewhat faster. - Independent CSS
External sites don’t interfere with your button’s css if you use an iframe technique. The disadvantage is that it makes things likes hovers impossible to integrate with the other site. (For example Fashiolista’s compact button). - Independent
The iframe approach makes it very hard for other sites to game the users like/love action. With a script approach a foreign site can simply call your javascript to fake someone loving the product. This freedom can be abused but also allows for mashups.
Script:
- Slower dom load
Creating iframes takes a lot more time for the browser. - Slower perceived load
The script approach allows you to format the buttons before the data is loaded. Vastly increasing the perceived load speed. - No shared functionality
Buttons can’t share functionality. So when someone logs in for one button its is not possible to update the others.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当然还有第三种选择，它是 iframe 和脚本方法的混合体。
您可以使用脚本来挂钩页面 DOM（在不同用途方面提供很大的自由度），并创建一个指向您的域的隐藏 iframe。
该脚本可以与当前文档进行通信，也可以使用跨域消息传递与您的文档进行通信，然后使用 iframe 作为代理与弹出窗口进行通信。
当然，XDM 确实带来了一些困难，但如果您使用像 easyXDM 这样经过验证的解决方案，那么它不应该是一个很大的问题。
这里是一个示例，展示了如何与弹出窗口交互。
There is of course a third option too, which is a hybrid between the iframe and the script approach.
You can use script to hook into the pages DOM (gives a loot of freedom with regards to different uses), and to create a hidden iframe pointing to your domain.
The script could communicate both with the current document, and with yours using Cross Domain Messaging and in turn with the popups using the iframe as a proxy.
Of course, the XDM does impose some difficulties, but if you use a proved solution like easyXDM, then it shouldn't be much of a problem.
Here is an example that shows how to interact with a popup.
基本上有2个问题
- 哪个是最好的方法
- 脚本方法面临的弹出通信困难的解决方法
感谢您提供弹出信息！
支持这些跨域弹出窗口的底层技术是什么？
如果我正确理解你的第三个选项：
- 国外网站加载我们的js
- js替换dom元素
- js 将隐藏的 iframe 打开到自己的域
然后如何打开一个弹出窗口，该弹出窗口仍然允许与加载到外国站点的 js 进行通信？为此，弹出窗口需要由 iframe 实例化，对吗？我们需要一种与 iframe 通信的方法。我认为除了设置其 window.location.href 之外，我不允许对 iframe 执行任何操作。你能解释一下它是如何工作的吗？
Basically 2 questions
- Which is the best approach
- Workaround for the popup communication difficulties the script approach faces
Thanks for the popup information!
What is the underlying technology to support these cross domain popups?
If i understand your third option correctly:
- foreign site loading our js
- js replacing dom elements
- js opening hidden iframe to own domain
How do I then open a popup which still allows for communication with our js loaded into the foreign site? For that the popup would need to be instantiated by the iframe right? And we would need a method to communicate with the iframe. I thought im not allowed to do anything with the iframe except setting its window.location.href. Could you explain how that works?