Как обращаться с "бесконечными" веб-страницами?
Когда-то жизнь была простой: все веб-страницы имели конечную длину, и если они не вписывались в текущий размер окна/вида, вы просто прокручивали вниз, пока не достигнете нижней части страницы.
Но я недавно заметил, что в мире веб-дизайна существует новая тенденция: Бесконечные веб-страницы.
Вероятно, наиболее знакомыми примерами сайтов, использующих такие страницы, являются Facebook и Twitter: вы прокручиваете до "дна", только чтобы вызвать некоторое обновление, которое добавляет контент на страницу, поэтому "старое дно" больше не является дном и, вместо этого появляется новое "дно".
В Android WebView мне нужно уловить весь контент, доступный на этой странице, но я не уверен, как это сделать:
Имитировать прокрутку пользователя вниз с помощью View.scrollBy(int x, int y), pageDown() или window.scrollTo()?
Или существует метод API, который делает это автоматически для меня?
Или я подхожу к этому совершенно неправильно, и я не должен пытаться добраться до "реального дна" в одном захвате (если возможно вообще)?
РЕДАКТИРОВАТЬ. Похоже, что тегирование этого вопроса javascript
передало противоположное сообщение. Мне интересно захватить (затем обрабатывать) такие бездонные страницы в Android WebView, используя Java.
Ответы
Ответ 1
Изменить: игнорировать этот ответ, я неправильно понял вопрос. Оставив ответ, если другие неверно понимают этот вопрос.
Вы можете использовать jqPageFlow jQuery плагин или основываться на своей документации.
Бесконечный прокрутка - еще один отличный вариант.
Ответ 2
Этот плагин jQuery делает именно это:
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Другой, с jQuery PHP:
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
Ответ 3
С учетом следующей веб-страницы:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- website code -->
<!-- The endless articles you want to process -->
<div class="article">
</div>
<div class="article">
</div>
<div class="article">
</div>
<!-- ... -->
</body>
</html>
Здесь будет использоваться код:
(function($) { // closure
$(function() { // when the document is ready
var height = $(this).height(), // get initial height
lastEl = null, // track last element processed
getData =
// this function will process the data as it comes in
function() {
var $elements = $(".article");
// don't reprocess data
if(lastEl) {
$elements = $elements
.slice($elements.index(lastEl)+1);
}
lastEl = $elements
.each(function() {
// do what you want with the element
})
// save the last element processed
.get(-1) || lastEl;
// finally, scroll to the bottom of the page
$(window).scrollTop($(document).height());
};
$(document).bind('DOMSubtreeModified', function() {
var newHeight = $(this).height();
if(newHeight != height) {
height = newHeight;
getData();
}
});
getData();
});
})(jQuery));
Просто измените селектор $elements на то, что вы хотите найти. Тогда вы должны быть в порядке. Это многословный, но также и свет производительности.
Ответ 4
Независимо от того, какой язык вы используете, решение довольно простое. Вы просто поймаете bechavior пользователя (путем захвата текущего y и сравнения его с максимальным количеством страницы), тогда вам нужно добавить новую информацию к вашему контенту, используя асинхронное соединение. Вот и все.
Не знаю очень хорошо Java, поэтому я могу только дать подсказку, но идея во всех технологиях/языках одинакова.