如何在GMail中实现聊天窗口的弹出功能？ [英] How can I implement the pop out functionality of chat windows in GMail?

问题描述

我不是在寻找一个完整的实现，我对他们是如何做到这一点更感兴趣。我知道他们使用GWT，但我想要一个更低级别的答案。天真的，我会先想到当你点击弹出窗口链接时，他们只需打开一个新窗口并将内容复制到其中。有很多理由说明为什么这样做不会很好，所以我想知道是否有人知道或有想法如何做到这一点或如何做到。

I'm not looking for a full implementation, I'm more interested in how they do it. I know they use GWT, but I'd like a more low level answer. Naively, I would start by thinking when you click the popout link they simply open a new window and copy content into it. There are lots of reasons why that won't work out well, so I'm wondering if anyone knows or has ideas on how they do this or how it could be done.

推荐答案

我最近需要在应用程序中解决这个问题。我最终使用这个很棒的小jQuery插件来实现这个技巧：WindowMsg（见底部的链接）虽然我确信还有其他方法可以完成相同的任务，但该插件确实有效：

I recently needed to solve exactly this problem in an app. I ended up using this great little jQuery plugin to do the trick: WindowMsg (see link at bottom) While I'm sure there are other ways to accomplish the same task, that plugin does works thusly:

• 首先使用window.open从原始窗口创建一个新的子窗口。


• 保存对返回的窗口对象的引用window.open


• 您在子窗口中调用库方法，为库添加隐藏表单以存储数据


• 您调用库父窗口中使用window.document.forms填充子窗口上的表单字段的方法（该库抽象所有这些东西，所以除非你查看源代码，否则你甚至不知道有涉及的表格）window.document .forms在所有主流浏览器上的工作方式相同，所以这与x-browser兼容的抽象


• 最后，子窗口使用window.opener返回其父窗口，并可以通过parall进行通信隐藏在父级上的隐藏形式


• 该库实现了一个方便的帮助程序，它在每一侧运行一个回调函数，使回调链易于处理

• first you create a new child window from your original window using window.open
• you save a reference to the window object returned by window.open
• you call a library method in the child window that adds a hidden form for the library to store data in
• you call a library method in the parent window that uses window.document.forms to populate form fields on the child window (the library abstracts all of this stuff so you wouldn't even know there was a form involved unless you looked at the source) window.document.forms works the same on all major browsers so this abstraction in x-browser compatible
• finally, the child window refers back to its parent window using window.opener and can communicate back via a parallel hidden form on the parent
• the library implements a convenient helper that takes a callback function to run on each side to make the callback chain easy to deal with

根据我使用库的经验，如果他们从JSON.org中包含了JSON 2库，那将会非常好。开箱即用，WindowMsg只允许您在窗口之间发送字符串消息，但通过一些非常简单的使用JSON 2库，我能够破解它以允许在窗口之间发送完整的JSON对象。我敢打赌，更成熟的库（比如google使用的那些）包含了那种序列化和反序列化。

In my experience working with the library, it would have also been quite nice if they had included the JSON 2 lib from JSON.org. Out of the box, WindowMsg only allows you to send string messages between windows, but with some pretty simple use of the JSON 2 lib, I was able to hack it to allow the sending of full JSON objects between windows. I bet more mature libraries (such as whatever google uses) include that kind of serialization and de-serialization baked in.

我在这里放这个链接因为某些原因， Stack Overflow格式化程序将其转换为没有结束标记的锚链接，我不希望我的整个帖子成为一个巨大的超链接！

I am putting this link here because for some reason, the Stack Overflow formatter turns it into an anchor link with no closing tag and I don't want my whole post to be one giant hyperlink!

WindowMsg：
http：// www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/

WindowMsg: http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/

这篇关于如何在GMail中实现聊天窗口的弹出功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！