Google Docs Ctrl + C 技术浅析
用 google docs 打开 pdf 文件,选中文本:
表面上没有任何有趣的地方。但仔细一看,会发现选区的颜色是浅蓝色,而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性,立马 firebug:
不看不知道,一看真蹊跷。selection-highlight 是选区,选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性:Ctrl + C 可以复制图片中的文字!
google 太强悍了,好在前端代码都是开源的,下面简单分析下。
首先数据在哪呢,这个比较容易找到,在 firebug 里有一个请求返回的数据如下:
以下是代码片段: <?xml version="1.0" encoding="UTF-8"?> <pdf2xml> <meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/> <meta name="Producer" content="Adobe Acrobat 8.1"/> <meta name="CreationDate" content="20100316080708-04’00’"/> <page t="0" l="0" w="612" h="773"> <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271, 7,280,39,322,7,330,11,344,24,370,23,395,20,418,7"> Please post comments or corrections to the Author Online forum at</text> ... |
有了这份数据,就可以根据选区得到对应的文本。
接下来的问题是,如何将文本放到剪贴板里?第一反应是用 flash 实现,但感觉 google 不会这么做。禁用掉 flash 插件后,功能正常,这说明是用 js 实现的。
通过 Profile 工具 + Fiddler + 肉眼识别 + 运气,终于定位到了关键代码:
以下是代码片段: n.am = function(a) { if (! (!this.k.Ca && Mr(this, a))) { ac && this.lf.focus(); this.lf.select(); Nr(this, a) } }; |
只要注释掉上面的代码,Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索,在 HTML 里,发现了秘密:
到此真相大白:当用户按下 Ctrl + C 时,js 会注入事件,首先根据坐标从数据里取出对应文本,然后将文本赋值给 textarea, 并将其激活和选中。这样,就和用户选中 textarea 的内容,再按下 Ctrl + C 的效果是一样了。
强悍的 google, 技术创新无处不在!
注意:利用 textarea 只能复制纯文本,如果想复制富文本,可以借鉴 google docs 编辑 Word 文档时的处理方式:采用 iframe 充当临时容器,有兴趣的可以进一步研究。
发现这个秘密后,最近在疯狂搞编辑的牛人承玉(欢迎搞编辑器的其他牛人加盟)立刻想到了各大站长们非常喜爱的功能:附带警告信息的禁止copy. 据说,能成功复制的,都不是“人”。
我的尝试是:点击按钮,复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去,但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制,对于触发的异步 Ctrl + C, 浏览器会限制其功能。
Google 的产品里有很多秘密,真诱人,创意无限!
建议继续学习:
- vim的复制粘贴小结 (阅读:6489)
- VIM复制粘贴的那些事 (阅读:4009)
- MySQL5.5复制/同步的新特性及改进 (阅读:3731)
- MySQL复制的概述、安装、故障、技巧、工具 (阅读:3220)
- MySQL Cluster 与 MongoDB 复制及分片设计及原理 (阅读:3216)
- 快速复制一张大表讨论 (阅读:3162)
- [MySQL优化案例] — slave延迟很大优化方法 (阅读:2629)
- 用 JS 复制艺术 (阅读:1554)
- 在 Linux 上复制和重命名文件 (阅读:785)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:lifesinger 来源: 岁月如歌
- 标签: 复制
- 发布时间:2010-07-27 23:22:51
- [47] 图书馆的世界纪录
- [47] Oracle MTS模式下 进程地址与会话信
- [47] IOS安全–浅谈关于IOS加固的几种方法
- [47] 如何拿下简短的域名
- [43] android 开发入门
- [42] 【社会化设计】自我(self)部分――欢迎区
- [41] 读书笔记-壹百度:百度十年千倍的29条法则
- [40] 界面设计速成
- [38] 视觉调整-设计师 vs. 逻辑
- [38] Go Reflect 性能