实现一个Web内容片段收集引擎的设想
现在许多Web内容都不是开放提供的,而是由封闭的社交系统分享的。自动的浏览器爬虫通常爬取这些内容会遇到技术性困难(反爬虫),或者是robots.txt策略阻止。
解决这个问题的思路就是引入人工协作式交互:封闭系统的授权用户可以选取这些封闭Web页面内容中的真正有价值的片段,然后将之复制收藏到另外一个系统(数据库)中。
Web内容片段在数据结构上相当于一棵完整DOM树上的Range指定的Fragment。
但是真正的技术困难在于:如何尽最大可能保留原始内容显示的CSS样式?我通常喜欢把技术博客上的内容复制,然后到另一个html WYSIWYG富文本编辑器中。比如Wordpress、Tower。但在这个过程中,发现一些问题:各个不同的WYSIWYG富文本编辑器能力不同:
(1)Tower的富文本编辑器不支持<table>元素,高级的HTML5 Ruby似乎也不支持;
(2)Wordpress的富文本编辑器在某些情况下抹掉了许多原始CSS样式,一个最奇怪的问题是文本段落的行距扩大了
那么,如何尽可能地“保留原始内容显示的CSS样式”呢?W3C还不支持Scoped CSS(并且似乎也不打算支持),假如支持Scoped CSS的话,倒是可以反向查找DOM Fragment中每个Element元素被实际应用到的CSS Rule,并且重写提取。
在没有Scoped CSS的情况下,也许可以使用嵌入iframe元素作为wrapper包住DOM Fragment的方法?iframe中再使用一个style元素。
最后可以考虑把所有CSS style全部内联到DOM Fragment中的每个Element元素上。但这个方法会显著增大数据量。因此需要一种智能的方法去除某些不需要设置(实际上是UserAgent默认的样式定义)
技术调查困难点:
- UI交互(移动设备适配):不是基于TouchMove拖放选择一个Range,而是直接通过Touch/Press指定start/end Position来选择一个Range
- 根据DOM Range中的每个Element,以及原始网页的全部CSS定义,重新提取/重写出实际应用到的CSS样式
- 实际上这里倒是可以参考Chrome for Android的OfflinePages模块的相关代码,尤其是根据Element反向查找对应的CSS规则。
- CSS提取过程的优化:考虑元素之间CSS样式的inherit关系(*1)、UserAgent默认样式(*2)、以及忽略对实际可视效果影响不大的样式(*3),进一步减少CSS样式的数据量
- 复制出的DOM Fragment是否可能通过放到一个额外的iframe元素中,做到“Scoped CSS”所设想的CSS隔离效果???
触摸屏设备上的拖放操作并非不能用来选择DOM内容片段,但是它有一些额外的问题:
(1)某些触摸设备的硬件驱动有bug,导致touchmove过程中会产生一个touchend/cancel,导致前面选中的Range内容状态被清除了;
(2)网站本身可以使用CSS user-select:none; 或者JS event.preventDefault()来阻止默认的内容复制行为;
(3)拖放超过一个屏幕的viewport范围时,有时候不会触发自动的向下scroll,造成可用性问题;
(4)要选择的文字图文混排内容如果上面添加了一个图层,或者包含在一个<a>元素中的情况下,会导致浏览器内核的HitTest逻辑出问题;