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

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返回一个调整为当前滚动位置的矩形。 因此，给定的矩形由当前滚动位置调整，以便在同一坐标系中进行比较。

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