Question

我想抓住一些博客并以编程方式分析他们的基于html和CSS的布局，以查看例如如果侧边栏位于主要内容的左侧或右侧，有多少列以及它们的宽度。

我如何以最好的方式做到这一点？我可以使用任何工具或库吗？

（我更喜欢Python或PHP的解决方案。）

Answer 1

使用纯服务器端CSS和HTML解析这听起来非常困难 - 您必须重新创建浏览器的渲染引擎才能获得可靠的结果。

根据你的需要，我可以想到这方面的某种方式：

使用wget与--page-requisites
然后：
- 使用Selenium之类的工具浏览每个下载的页面，搜索元素名称并输出它们的位置（如果可以在Selenium中使用。我认为它是，但我不确定）
- 创建一个注入每个下载页面的jQuery。 jQuery搜索名为“sidebar”，“toolbar”等的元素，获取其位置，将结果保存到本地AJAX片段，然后继续下一个下载的页面。您只需要在浏览器中打开第一页，其余的将自动发生。实现起来并非易事，但可能。

如果您可以使用像.NET这样的客户端应用程序平台，那么构建一个包含浏览器控件的自定义应用程序可能会更容易，其DOM可以比仅使用jQuery更自由地访问。

Answer 2

你在找这个吗？

http://cthedot.de/cssutils/

这是Google搜索的第一个热门话题。至少还有其他四个看起来很有希望。也许您应该尝试使用Google，列出您找到的内容，并就特定软件包提出具体建议。

Answer 3

似乎可以通过PhantomJS实现这一点，使用类似这样的Javascript：

phantom.viewportSize = { width: 1024, height: 768 };

var page = new WebPage();

page.open("http://mashable.com/", function(status) {
    if (status === "success")
    {
        page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", function() {
            var position = page.evaluate(function() {
                return jQuery('#sidebar').position();
            });

            // Now position.left and position.top contains the
            // position of the #sidebar element. Use other
            // jQuery functions to calculate the relative position.

            phantom.exit();
        });
    }
});

以编程方式分析CSS布局

3 个答案: