使用 CSS 进行布局和格式化的屏幕抓取页面...如何抓取适用于 html 的 CSS？答案

【问题标题】：Screen scraping pages that use CSS for layout and formatting...how to scrape the CSS applicable to the html?使用 CSS 进行布局和格式化的屏幕抓取页面...如何抓取适用于 html 的 CSS？
【发布时间】：2010-09-22 21:39:53
【问题描述】：

我正在开发一个应用程序，用于对外部网页的一小部分（不是整个页面，只是其中的一小部分）进行屏幕抓取。

所以我的代码可以完美地抓取 html，但我的问题是我不仅想抓取原始 html，还想抓取用于格式化我正在提取的页面部分的 CSS 样式，所以我可以以完整的原始格式显示在新页面上。

如果您熟悉 firebug，它能够显示哪些 CSS 样式适用于您突出显示的页面的特定子集，所以如果我能找到一种方法，那么我可以使用这些样式在我的新页面上显示内容时。但是我不知道该怎么做............

【问题讨论】：

标签： html css screen-scraping firebug

【解决方案1】：

以下是一个好的开始：遍历您计划提取的 HTML 补丁，将每个元素（及其 ID/类/内联样式）收集到一个数组中。立即从页面的样式表中获取这些元素 ID 和类的样式。

然后，从目标补丁中的最外层元素开始，以类似的方式遍历 DOM 中的其余元素，最终一直到 body 和 HTML 元素，与您的初始数组并收集任何未在目标补丁中声明的样式或其应用的样式。

您还需要检查任何 * 声明并获取它们。然后，确保在将样式重新应用到最终输出时，按照正确的顺序执行此操作，因为您从 DOM 层次结构中从低到高收集它们，并且需要从高到低重新应用它们.

【讨论】：

【解决方案2】：

一个快速的技巧是拉下他们的 CSS 文件并将其应用于您用来显示数据的页面。为了避免任何干扰，您可以将页面加载到 IFrame 中，无论您需要在哪里显示它。当然，我不得不质疑这段代码的意图。您是否可以重新发布您正在抓取的信息？

【讨论】：

【解决方案3】：

如果您有任何方法可以确定“计算样式”，那么您可以有效地丢弃样式表，****gasp****，使用所有计算样式的属性应用内联样式。

但我不建议这样做。会很臃肿。

【讨论】：

【解决方案4】：

今天我需要在 Facebook 应用程序的应用程序构建器中抓取 Facebook 共享对话框以用作动态预览示例。我采用了 Firebug 1.5 代码库并添加了一个新的上下文菜单选项“使用内联样式复制 HTML”。我从 lib.js 复制了他们的 getElementHTML 函数并对其进行了修改：

移除类、id 和样式属性
删除 onclick 和类似的 javascript 处理程序
删除所有 data-something 属性
删除显式href并将其替换为“#”
用 div 替换所有块级元素，用 span 替换内联元素（以防止继承目标页面上的样式）
绝对相对网址
将所有应用的非默认 css 属性内联到全新的样式属性中
考虑通过向上遍历 DOM 树来设置父/子继承样式，从而减少内联样式膨胀
缩进输出

它适用于更简单的页面，但由于 Firebug（或 Firefox？）中的错误，该解决方案并非 100% 可靠。但是，当由可以调试和修复所有怪癖的 Web 开发人员操作时，它绝对是可用的。

到目前为止我发现的问题：

有时不会发出 clear css 属性（它会严重破坏布局）
:hover 和其他伪类不能这样捕获
firefox 仅在其模型中保留 mozilla 特定的 css 属性/值，因此例如您丢失了 -webkit-border-radius，因为 CSS 解析器跳过了它

无论如何，这个解决方案节省了我很多时间。最初我是手动选择他们的样式表并进行手动选择和后处理。它缓慢、无聊并且污染了我们的类命名空间。现在我可以在几分钟而不是几小时内抓取 facebook 标记，并且导出的标记不会干扰页面的其余部分。

【讨论】：