Как получить элементы в браузере без браузера внутри ограничивающей рамки

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) наружу. Вам придется работать с этими элементами внутри и возвращать только сериализуемое представление этих данных. Вы можете использовать обычные console.log звонки внутри casper.evaluate, но вы должны зарегистрироваться на мероприятие "remote.message", чтобы увидеть их.