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

Question

我想要获取网页上所有HTML元素的尺寸和位置，也就是它们在浏览器中显示时的位置。例如，像这样 (左上角,右上角,左下角,右下角)

在lxml中找不到这个功能。那么，Python中有没有什么库可以做到这一点呢？我也看过Perl中的Mechanize::Mozilla，但那似乎很难配置和设置。

我觉得为了满足我的需求，最好的办法是使用一个渲染引擎，比如WebKit或Gecko。

有没有针对这两个渲染引擎的Perl或Python绑定？我在谷歌上搜索关于如何“接入”WebKit渲染引擎的教程，但结果并不太有帮助。

Answer 1

没错，使用Javascript是个不错的选择：

用这行代码 var allElements=document.getElementsByTagName("*"); 可以选中页面上的所有元素。

接下来，你可以遍历这些元素，从每个元素中提取你需要的信息。关于如何获取元素的尺寸和位置的详细说明 可以在这里找到。

getElementsByTagName 返回的是一个节点列表，而不是数组（所以如果你的JS修改了HTML，这些修改会在节点列表中反映出来），所以我建议可以把数据整理好，然后通过AJAX发送到服务器。

Answer 2

lxml这个工具对你没有帮助。它根本不涉及前端的渲染。

要准确了解一个东西是怎么渲染的，你需要真正去渲染它。为此，你需要连接到一个浏览器，打开页面，然后在页面上运行一些JavaScript代码，以找到DOM元素并获取它的属性。

这完全是可行的，但我建议你先看看网站截图工具是怎么工作的（因为它们会分享90%你需要的代码，帮助你启动浏览器并显示正确的页面）。

你可能还是想用lxml来把你的JavaScript代码注入到页面中。

Answer 3

我找不到任何简单的方法（比如用Java、Perl或Python）来解决Webkit或Gecko的渲染问题。最好的选择是一个用Java写的Lobo渲染引擎，它的接口非常清晰，正好满足我的需求——可以访问DOM和HTML元素的渲染属性。

JRex是一个用Java封装的Gecko渲染引擎。