我正在开发一个应用程序,用于对外部网页的一小部分进行屏幕抓取(不是整个页面,只是其中的一小部分).
所以我的代码完全适用于抓取html,但我的问题是我不仅要抓取原始html,而且还要用来格式化我正在提取的页面部分的CSS样式,所以我可以显示在新页面,原始格式完好无损.
如果您熟悉firebug,它可以显示哪些CSS样式适用于您突出显示的页面的特定子集,所以如果我能找到一种方法,那么我可以在显示时使用这些样式我的新页面上的内容.但我不知道该怎么做……..
解决方法
今天我需要刮掉Facebook共享对话框,以便在我们的Facebook应用构建器中用作动态预览示例.我已经使用了Firebug 1.5代码库并添加了一个新的上下文菜单选项“复制带内联样式的
HTML”.我从lib.js复制了他们的getElementHTML函数并修改它来执行此操作：
>删除class,id和style属性
>删除onclick和类似的JavaScript处理程序
>删除所有数据 – 某些属性
>删除显式href并将其替换为“#”
>用div替换所有块级元素和使用span替换内联元素(以防止在目标页面上继承样式)
> absolictize相对网址
>将所有应用的非默认css属性内联到全新的样式属性中
>通过使用traversion DOM树来考虑样式化父/子继承来减少内联样式膨胀
>缩进输出
它适用于更简单的页面,但由于Firebug(或Firefox？)中的错误,解决方案不是100％健壮.但是,当由可以调试和修复所有怪癖的Web开发人员操作时,它绝对可用.
到目前为止我发现的问题：
>有时候不会发出明确的css属性(它会严重破坏布局)
>：无法以这种方式捕获悬停和其他伪类
> firefox在其模型中仅保留mozilla特定的css属性/值,因此例如你丢失-webkit-border-radius,因为CSS解析器跳过了这个
无论如何,这个解决方案节省了我很多时间.最初我是手动选择他们的样式表,并进行手动选择和后处理.我们的类命名空间很慢,很无聊和污染.现在我可以在几分钟而不是几小时内废弃facebook标记,导出的标记不会干扰页面的其余部分.
