Question

上下文

该问题是this one的后续问题。我认为通过硒WebDriver执行JS脚本是实现我的目标的最佳方法。

我需要

获取视口内用户可见的所有HTML（最终为C＃字符串）

我尝试过

选择整个dom并遍历整个dom，检查每个元素是否在视口中可见并且在视口中，并仅在两个条件都成立时才保留它。但这意味着，当它读取body元素时，会看到它实际上在视口中并且具有:visible状态，因此我将该元素添加到了visible列表中。

但是它会将该元素及其所有子元素添加在一起……因此，所有body子元素的DOM都会被选中，无论其可见性如何！

下面是经过大量修改后得出的代码。它部分基于SO答案

function isVisible(el)
{
    return $(el).is(':visible');
}

function isInViewport(el)
{
    var elementTop = $(el).offset().top;
    var elementBottom = elementTop + $(el).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

var all = $('*');

var selected = [];

for (var i = 0, max = all.length; i < max; i++)
{
    if (isInViewport(all[i]) && isVisible(all[i]))
    {
        // This adds the current element, but that means all its children are also implicitly added !
        selected.push(all[i]);
    }
}

// So when I convert the list to a string I end up with basicaly the whole dom except for the `head` tag and its content ...
return $(selected).filter(':not(html)').html();

提取或截断DOM-仅保留视口中的内容

0 个答案: