7

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

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

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

4

4 回答 4

5

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

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

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

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

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

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

于 2010-01-05T03:41:24.303 回答
3

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

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

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

于 2008-11-18T17:36:55.150 回答
3

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

于 2008-11-18T18:02:45.517 回答
-1

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

但我不推荐这个。会很臃肿。

于 2008-11-18T18:12:26.903 回答