刘钢的博客 – 我是UED

The Wilderness Downtown

如果你从没听说过互动电影，那就真的要点击这里开开眼界了。这个页面以灰白色调为主，页面上的动画效果皆由 HTML5 技术制作，官方推荐最好使用 Chrome 浏览器，经过我们的试用，IE8 与 Opera 均无法启动这个页面，而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比，偶尔还会出现崩溃现象，我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过，因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址，为什么？因为电影情节将会从这里开始，并且融合谷歌地图和谷歌街景的技术到电影中，达到非常震撼的互动效果，其他诸如 Canvas，Video，Audio 等的 HTML5 标准特效就更加不用多介绍了。

输入小时候的住址

经过好一会儿的载入等待之后，由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了，开始的时候，一名模样十分鬼祟的白衣男子在狂奔，奔到有气无力的时候，电影会先暂停，让你用交互绘图工具绘画一张明信片，寄给小时候的你。

一双无影脚

谷歌街景视图中的是不是你儿时的家？

你可以用鼠标乱涂乱画，也可以直接输入你想说的话，不过这张明信片，无论你的画工有多精细，画出来的都只能是错综复杂的线条，配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs》中的歌曲 We Used to Wait 作为主题音乐，颇有剪不断理换乱的感觉。

错综复杂的明信片

写完明信片后将会是一段狂奔的视频

纸上谈兵完毕，最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。

The Wilderness Downtown

关于 Arcade Fire （拱廊之火）

Arcade Fire（拱廊之火）是一支独立摇滚乐队，来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne，他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓，除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器，然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire（拱廊之火）

拱廊之火乐队赢得了诸多奖项，包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral》（葬礼）和《Neon Bible》（霓虹圣经）同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs》（郊区），更是得到了评论界的称赞。

从玉伯那里转来的，Goole非常NB
用 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 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！