如何获取网页中 HTML 元素的渲染位置

113 阅读3分钟

想获取浏览器渲染网页时所有 HTML 元素的尺寸(坐标),即它们被渲染的位置。例如,(左上、右上、左下、右下)。然而,在 lxml 中找不到此功能。因此,有没有什么 Python 库可以做到这一点?我还查看了 Perl 中的 Mechanize::Mozilla,但似乎很难配置/设置。我认为满足我要求的最佳方法是使用渲染引擎,例如 WebKit 或 Gecko。有没有适用于上述两种渲染引擎的 perl/python 绑定?在 Google 上搜索有关如何“插入”到 Webkit 渲染引擎的教程并没有多大帮助。

huake_00210_.jpg 2. 解决方案

  • 答案 1

lxml 完全帮不了你。它根本不关心前端渲染。为了准确地计算某个内容的渲染方式,你需要渲染它。为此,你需要连接到浏览器,生成页面并在页面上运行一些 JS 来查找 DOM 元素并获取其属性。这完全有可能,但我认为你应该首先了解网站屏幕截图工厂的工作方式(因为它们将共享 90% 的代码,以便启动浏览器并显示正确的页面)。你可能仍希望使用 lxml 将 JavaScript 注入页面。

  • 答案 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 }
});

相关文档在这里。

  • 答案 3

是的,使用 Javascript 是正确的方法:

var allElements=document.getElementsByTagName("*");

将选择页面中的所有元素。然后,你可以循环浏览这些元素并从中提取所需信息。有关获取元素的尺寸和位置的良好文档,请点击这里。 getElementsByTagName 返回一个 nodelist 而不是一个数组(因此,如果你的 JS 更改了你的 HTML,这些更改将反映在 nodelist 中),所以我倾向于将数据构建成 AJAX POST 并在完成后将其发送到服务器。

  • 答案 4

我无法找到任何简单的解决方案(例如 Java/Perl/Python :) 来连接到 Webkit/Gecko 以解决上述渲染问题。我能找到的最好的解决方案是用 Java 编写的 Lobo 渲染引擎,它有一个非常清晰的 API,可以准确地完成我想要做的事情 - 访问 HTML 元素的 DOM 和渲染属性。JRex 是 Gecko 渲染引擎的 Java 封装。

  • 答案 5

你有三个主要选择:

  1. www.gnu.org/software/py… 基于 webkit;
  2. python-comtypes 用于访问 MSHTML(仅限 Windows)
  3. hulahop(python-xpcom)基于 xulrunner 你应该获取 pyjamas-desktop 源代码并在 pyjd/ 目录中查找“启动”代码,这将允许你创建一个 Web 浏览器应用程序,并在引擎调用“页面加载”回调后开始操作 DOM。 你可以执行节点遍历,并可以访问所需 DOM 元素的属性。你可以查看 pyjamas/library/pyjamas/DOM.py 模块,以了解你需要使用哪些功能来完成你想要做的事情。 但是,如果以上三个选项还不够,那么你应该阅读页面 wiki.python.org/moin/WebBro… 以了解更多选项,其中许多选项已在这里由其他人提及。 l。