Question

我有一个用例，我需要用户在网页上标记边界框并使用PhantomJS或CasperJS我想获得此框所覆盖或触及的元素。

这是可行的，如果是这样的话？

Answer 1

迭代页面的所有元素，获取其边界框并查看该边界框是否在给定框内是相当容易的：

var rectExample = {
  top: 0,
  left: 0,
  width: 500,
  height: 100
};
casper.evaluate(function(rect) {
  rect.top -= window.scrollY;
  rect.left -= window.scrollX;
  var all = document.querySelectorAll('*');
  var filtered = Array.prototype.filter.call(all, function (el) {
    var elRect = el.getBoundingClientRect();
    return elRect.width > 0
      && elRect.height > 0
      && rect.width >= elRect.width 
      && rect.height >= elRect.height 
      && rect.top <= elRect.top 
      && rect.left <= elRect.left 
      && (rect.top + rect.height) >= (elRect.top + elRect.height) 
      && (rect.left + rect.width) >= (elRect.left + elRect.width);
  });

  filtered.forEach(function(el){
    // TODO: do something with the element that is inside of the rectangle
  });
}, rectExample);

请注意，getBoundingClientRect会返回一个调整为当前滚动位置的矩形。因此，给定的矩形由当前滚动位置调整，以便在相同的坐标系中进行比较。

请注意，无法将页面上下文（casper.evaluate内部）中的DOM元素返回到外部。您必须使用内部的这些元素，并仅返回该数据的可序列化表示。您可以在console.log内使用普通的casper.evaluate来电，但是您必须注册"remote.message"事件才能看到它们。

如何在无边界浏览器中获取边界框内的元素

1 个答案: