Question

鉴于网页，您如何在网页上找到最大的矩形作为主要内容区域？

例如，比较侧边栏，页眉，页脚和主要内容区域的大小。是否可以通过简单地搜索页面上发现的所有矩形中的最大矩形来找到主要内容区域？

通常怀疑最高和最宽的矩形是主要的内容区域，想知道在Javascript或Python中是否存在某种算法来测试这个假设。

Answer 1

所以虽然这个问题对我来说没有多大意义，但我无法抗拒用递归扫描DOM树来检索和按大小排序元素的概念：）

这是一个用于执行此操作的哑函数（您可以将其粘贴到浏览器控制台中）：

function scanSizes(root) {
  return [].reduce.call(root, function(sizes, node) {
    var bounds = node.getBoundingClientRect();
    sizes.push({tag: node.outerHTML, area: bounds.width * bounds.height});
    var children = node.querySelectorAll("*");
    if (children.length > 0)
      sizes.push.apply(sizes, scanSizes(children));
    return sizes;
  }, []).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("body > *"));

// sizes[0].tag contains the largest html tag (as a string)
// sizes[0].area its area size in pixels (width * height)

编辑：更严重的是，您可能对this topic及相关答案感兴趣。

编辑：当然，性能明智的递归并不是一个好主意。您可以使用这样的方法来获得更有效的解决方案：

function scanSizes(root) {
  return [].map.call(root, function(node) {
    var bounds = node.getBoundingClientRect();
    return {tag: node.outerHTML, area: bounds.width * bounds.height};
  }).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("*"));

Answer 2

我正在添加另一个答案，因为我偶然发现了<main> HTML5 element spec，开发人员应该用它来定义他们的主要内容区域，所以这可能是你要检查的第一个元素在任何刮页中。

所以基本上你应该检查页面中的任何单个<main>或role="main"元素，然后只使用其他内容检测策略：）

Answer 3

目前的答案过于复杂。您需要知道的主要事项是element.getBoundingClientRect();。这是一个较小的函数 - 我正在寻找最大的table，但你可以使用你想要的任何CSS选择器。

// Fix NodeList.sort()
NodeList.prototype.sort = Array.prototype.sort

var elements = document.querySelectorAll('table')

var getArea = function(element){
    var rectangle = element.getBoundingClientRect();
    return rectangle.width * rectangle.height;
}

elements.sort(getArea)[0]

找到面积最大的元素（主要内容区域）？

3 个答案: