使用 WebKit（或 Gecko）查找呈现的 HTML 元素位置答案

【问题标题】：Finding rendered HTML element positions using WebKit (or Gecko)使用 WebKit（或 Gecko）查找呈现的 HTML 元素位置
【发布时间】：2010-11-02 01:51:44
【问题描述】：

我想获取浏览器呈现网页的所有 HTML 元素的尺寸（坐标），即它们呈现的位置。例如(top-left,top-right,bottom-left,bottom-right)

在 lxml 中找不到这个。那么，Python中是否有任何库可以做到这一点？我也看过 Perl 中的 Mechanize::Mozilla，但它似乎很难配置/设置。

我认为根据我的要求执行此操作的最佳方法是使用渲染引擎 - 例如 WebKit 或 Gecko。

以上两个渲染引擎是否有可用的 perl/python 绑定？谷歌搜索关于如何“插入”到 WebKit 渲染引擎的教程并不是很有帮助。

【问题讨论】：

原因，我想直接插入浏览器的渲染引擎是因为，我必须用至少一百万个 URL 进行测试，我不认为使用 Selenium 等。这样做会非常有效。 :)

标签： python html perl rendering rendering-engine

【解决方案1】：

lxml 根本不会帮助你。它根本不关心前端渲染。

要准确计算出某些内容的渲染方式，您需要对其进行渲染。为此，您需要连接到浏览器，生成页面并在页面上运行一些 JS 以查找 DOM 元素并获取其属性。

这是完全有可能的，但我认为你应该先看看网站截图工厂是如何工作的（因为它们会共享 90% 的代码，你需要让浏览器启动并显示正确的页面）。

您可能仍希望使用 lxml 将您的 javascript 注入页面。

【讨论】：

谢谢！我查看了 Webkit (Pywebkitgtk) 进行渲染。但是，它目前不支持获取 DOM - code.google.com/p/pywebkitgtk/issues/detail?id=13
在将 HTML 传递给浏览器之前对其进行操作。添加一个 javascript 块以 AJAX 将正确的数据返回给您。
实际上，我正在尝试查找使用渲染引擎的示例（例如 Gecko、Webkit）。但是，几乎找不到教程。

【解决方案2】：

我同意Oli，渲染有问题的页面并通过 JavaScript 检查 DOM 是恕我直言最实用的方法。

您可能会发现jQuery 在这里非常有用：

$(document).ready(function() {
    var elem = $("div#some_container_id h1")
    var elem_offset = elem.offset();
    /* elem_offset is an object literal:
       elem_offset = { x: 25, y: 140 }
    */
    var elem_height = elem.height();
    var elem_width = elem.width();
    /* bottom_right is then
       { x: elem_offset.x + elem_width,
         y: elem_offset.y + elem_height }
});

相关文档是here。

【讨论】：

【解决方案3】：

是的，Javascript 是要走的路：

var allElements=document.getElementsByTagName("*");将选择页面中的所有元素。

然后你可以循环遍历这个从每个元素中提取你需要的信息。关于获取元素尺寸和位置的良好文档is here.

getElementsByTagName 返回一个节点列表而不是一个数组（因此，如果您的 JS 更改了您的 HTML，这些更改将反映在节点列表中），所以我很想将数据构建到 AJAX 帖子中，并在它发送到服务器时发送到服务器完成。

【讨论】：

【解决方案4】：

我找不到任何简单的解决方案（即 Java/Perl/Python :) 来连接到 Webkit/Gecko 以解决上述渲染问题。我能找到的最好的是用 Java 编写的 Lobo rendering engine，它有一个非常清晰的 API，可以完全满足我的要求 - 访问 DOM 和 HTML 元素的呈现属性。

JRex 是 Gecko 渲染引擎的 Java 包装器。

【讨论】：

查看此页面的建议：holovaty.com/writing/headless-html-rendering-engine

【解决方案5】：

您有三个主要选择：

1) http://www.gnu.org/software/pythonwebkit 是基于 webkit 的；

2) 用于访问 MSHTML 的 python-comtypes（仅限 Windows）

3) 基于 xulrunner 的 hulahop (python-xpcom)

您应该获取 pyjamas-desktop 源代码并在 pyjd/ 目录中查找“启动”代码，这将允许您创建 Web 浏览器应用程序并开始，一旦引擎调用了“页面加载”回调, 来操作 DOM。

您可以执行节点遍历，并且可以访问您需要的 DOM 元素的属性。您可以查看 pyjamas/library/pyjamas/DOM.py 模块，了解您需要使用的许多东西才能做您想做的事。

但如果以上三个选项还不够，那么您应该阅读页面http://wiki.python.org/moin/WebBrowserProgramming 以了解更多选项，其中许多选项已被其他人提及。

l.

【讨论】：

我还没有尝试过pythonwebkit（几天前发布了）......但是，它看起来确实很有希望。

【解决方案6】：

您可以考虑查看WWW::Selenium。有了它（和selenium rc），您可以从 Perl 内部操纵字符串 IE、Firefox 或 Safari。

【讨论】：

原因，我想直接插入浏览器的渲染引擎是因为，我必须用至少一百万个 URL 进行测试，我不认为使用 Selenium 等。这样做会非常有效。 :)
是的，它不会 :) 幸运的是，您可以调整其中一个 pyjamas-desktop 运行时来简单地创建一个不实际上在屏幕上显示的 GUI（又名“无头”用法）。如果你真的想认真对待资源，那么创建一个无头版本的 pythonwebkit（根本不启动 GTK）将是一个好方法。我大约需要 2 周的时间来完成编程：如果您准备与我签约来完成这项工作，请与我联系（我很容易找到：谷歌“luke leighton”）。

【解决方案7】：

问题在于当前的浏览器呈现的东西并不完全相同。如果您正在寻找符合标准的处理方式，您可能会在 Python 中编写一些东西来呈现页面，但这将是大量的工作。

您可以使用wxHTML control from wxWidgets 单独呈现页面的每个部分以了解其大小。

如果你有 Mac，你可以试试WebKit。同一篇文章也对其他平台上的解决方案提出了一些建议。

【讨论】：