How to handle "infinite" web pages?
Once upon a time, life was simple: All web pages had finite length and if they didn't fit into the current windows/view size, you'd simply scroll down until you reached the bottom of the page.
But I recently noticed that there is a new trend in the web design world: Bottomless web pages.
Probably the most familiar examples of sites utilizing such pages are Facebook and Twitter: You scroll to the "bottom", only to trigger some refresh that adds content to the page, so the "old bottom" is no longer a bottom and, instead, there is a new "bottom".
In an Android WebView, I need to be able capture all the content currently available on that "page", but I am not sure how to approach this:
Simulate user's scroll down via View.scrollBy(int x, int y), pageDown() or window.scrollTo()?
Or is there an API method that does this automatically开发者_JS百科 for me?
Or am I approaching this completely wrong and I shouldn't attempt to get to the "real bottom" in one capture (if possible at all)?
EDIT: It seems that tagging this question javascript communicated the opposite message. I am interested in capturing (then processing) such bottomless pages on Android's WebView, using Java.
Edit: disregard this answer, I misunderstood the question. Leaving the answer in case others misunderstand the question as well.
You could use the jqPageFlow jQuery plugin, or base yourself on its documentation.
Infinite scroll is another great option.
This jQuery plugin does just that: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Another, with jQuery an PHP: http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
Regardless what language do you use, the solution is quite simple. You just catch the bechavior of user (by capturing current y and comparing it to max y od the page), then You have to add some new information to you content, by async connection. That is all. Don't know very well Java so I can only give a hint, but the idea is the same in all technologies/languages.
Given the following web page:
<!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>
Here would be the code to use:
(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));
Just change the $elements selector to what you want to look for. Then, you should be okay. It is verbose, but also performance-light.
加载中,请稍侯......
精彩评论