Как получить содержимое, отображаемое в данный момент в окне просмотра браузера - PullRequest
Новая
       24

Как получить содержимое, отображаемое в данный момент в окне просмотра браузера

7 голосов
/ 07 сентября 2010

Как мне узнать, какая часть длинного документа отображается в данный момент?

Например, если мой HTML содержит 1000 строк
1
2
3
...
999
1000

и пользователь находится ближе к середине, показывая 500-ю строку, тогда я хотел бы получить "500 \ n501 \ n502" или что-то в этом роде.

Очевидно, что большинство сценариев было бы более сложным, чем это, но мое требование состоит в том, чтобы найти, какой текст в настоящее время отображается в окне просмотра браузера, чтобы я мог показать значение состояния, соответствующее текущему тексту.

Спасибо Мартин

Ответы [ 5 ]

5 голосов
/ 07 сентября 2010

Если у вас есть jQuery, вы можете использовать эту функцию, чтобы проверить, отображается ли элемент DOM в настоящее время в окне просмотра: 

function isInView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
3 голосов
/ 07 сентября 2010

Вы можете получить значение в пикселях из свойства scrollTop:

document.body.scrollTop = 40;

Чтобы узнать, какая часть вашего документа является видимой, вы можете выполнить цикл(скажем) все p-теги, пока вы не найдете один с отрицательным значением scrollTop.Тот, что перед этим, тот, что вверху окна.

1 голос
/ 07 июня 2012

Я только что видел пример кода на msdn 

function isinView(oObject)
{
   var oParent = oObject.offsetParent; 
   var iOffsetTop = oObject.offsetTop;
   var iClientHeight = oParent.clientHeight;
   if (iOffsetTop > iClientHeight) {
     alert("Special Text not in view. Expand Window to put Text in View.");
   }
   else{
      alert("Special Text in View!");
   }
}
0 голосов
/ 08 сентября 2010

Я реализовал то, что мне показалось более оптимальным решением для моей среды:

Я пишу для Android, чтобы я мог легко взаимодействовать с классом Java из javascript.Мое реальное решение заключалось в получении offsetTop всех интересующих меня тегов и передаче смещений в java.

Также регистрация обработчика прокрутки, который передал window.pageYOffset через тот же класс Java.Затем класс java может сравнить offsetTop каждого тега с pageYOffset, чтобы увидеть, какой тег находится в верхней части текущего окна просмотра.

0 голосов
/ 07 сентября 2010

Да, есть способ. Я буду использовать API YUI, чтобы проиллюстрировать мой пример. Сначала ваш текст должен быть в каком-то элементе dom, будь то span, div, p или что-то еще, он должен быть в элементе. Здесь я приму пункт списка 

var viewPortY = YAHOO.util.Dom.getDocumentScrollTop(),
viewPortHeight = YAHOO.util.Dom.getViewportHeight(), i = 0,
// get all the dom elements that contain the text, sorry if this isn't exact, its just a rough example
items = YAHOO.util.Dom.getElementBy(null, 'li', document.getElementById('item-container')),
viewedItems = [];
    for (i = 0 ; i < items.length; i++) {
        var y = YAHOO.util.Dom.getY(items[i])
        if (y > viewPortY && y < (viewPortY + viewPortHeight)) {
           viewedItems.push(items[i])
        }
    }

Итак, по сути, я получаю все объекты dom, которые содержат интересующий вас текст. Затем я перебираю цикл, и координата Y каждого находится между областями просмотра Y и Y + Высота ViewPort, я помещаю в массив. *

...