使用 WebKit（或 Gecko）查找渲染的 HTML 元素位置

Question

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

在 lxml 中找不到此内容。 那么，Python 中有没有库可以做到这一点呢？ 我还查看了 Perl 中的 Mechanize::Mozilla，但是，这似乎很难配置/设置。

我认为满足我的要求的最佳方法是使用渲染引擎 - 例如 WebKit 或 Gecko。

是否有可用于上述两个渲染引擎的 perl/python 绑定？ Google 搜索有关如何“插入”WebKit 渲染引擎的教程并没有多大帮助。

Answer 1

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

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

这是完全可能的，但我认为您应该首先了解网站屏幕截图工厂的工作原理（因为它们将共享启动浏览器并显示正确页面所需的 90％ 的代码）。

您可能仍想使用 lxml 将 javascript 注入页面。

Answer 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 }
});

相关文档是 此处。

Answer 3

是的，Javascript 是正确的选择：

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

然后您可以循环遍历它，从每个元素中提取您需要的信息。 关于获取元素的尺寸和位置的良好文档 在这里。

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

Answer 4

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

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

Answer 5

您有三个主要选项：

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

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

3) hulahop (python-xpcom) 基于 xulrunner

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

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

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

湖

Answer 6

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

Answer 7

问题是当前的浏览器渲染的内容并不完全相同。 如果您正在寻找符合标准的做事方式，您可能可以用 Python 编写一些东西来呈现页面，但这将是一项繁重的工作。

您可以使用 wxWidgets 中的 wxHTML 控件 单独渲染页面的每个部分以获得关于它的大小的想法。

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