I am using an Android WebView to show some HTML content (a String with HTML tags to be precise) generated at runtime. The content has basically an HTML <table ...> showing various stuff and the rows of this table are generated by my program. The HTML content is loaded in my WebView by calling the loadDataWithBaseUrl() method.
Now everytime I generate a new row, I create a new <tr></tr> and modify the HTML string to add the newly created row to the table.
Obviously I have to recall the loadDataWithBaseUrl() method to reload the HTML and show the latest row.
Now there are a few problems here:
First) Every time loadDataWithBaseUrl() is called, the WebView scrolls to the top of the page
Second) I want to scroll the WebView after it is loaded all the way to the bottom of the page so that the latest generated row is always shown.
Now the actual problem:
If I try to call WebView's pageDown(true) method after the page has finished loading, I will get a nasty animation and the user has to wait for the WebView finish scrolling to the bottom of the page.
As there seems to be no way whatsoever to disable this jumping up and down behavior, I resorted to JavaScript and I am scrolling the page all the way to the bottom after the page has loaded (calling a function on window.onload)
Now I am facing another problem! Still there is a flicker caused by the WebView reloading the page which results in scrolling all the way up and the JavaScript function scrolling the page immediately to the bottom.
I have spent countless hours in the past few days and still haven't figured out a way to achieve my desired results. Is there a way to solve this issue? (Workaround/different strategy maybe?) The culprit is obviously the innate behavior of the WebView that scrolls to the top when it finishes loading the page.
Can you try something like this:
if (_webView.getScrollY() + _webView.getHeight() > _webView.getContentHeight())
_webView.scrollTo(0, _webView.getContentHeight() - _webView.getHeight());
There are some threads running on how to make scrolling and page turns e-ink friendly:
http://github.com/aarddict/android/issues/28#issuecomment-3512595
http://www.mobileread.com/forums/showthread.php?p=1929476#post1929476
Related
This page on medium https://medium.freecodecamp.org/ uses infinite scroll, but when viewing source code, the html is there so it doesn't use ajax or am I mistaken ?
Open the network panel in your inspector and watch the requests roll in as you scroll down. It's just getting jpg images so it's likely that the html is already there and the scroll action causes an ansync request for the image and javascript plugs it into the appropriate divs.
There's a page that has infinite scroll and it loads the next page when you scroll to the bottom of the current page, like twitter and facebook.
I want to force the page to load several pages instead of just one every time I reach the bottom.
I see in chrome's console that something new pops up into the elements and then disappear almost immediately. I managed to capture some of that element before it disappeared: <iframe class="hidden_elem" name="transport_frame_9" src="/ajax/pagelet/...
, The number in transport_frame_9 increases on every load.
Also I tried to look in the <script> tags of the page for clues but couldn't find anything useful.
Is it even possible to invoke this script to load several pages? Or maybe there's a way to fool the page to think I reached the bottom several times? Like setting a some scrolledToBottom property to true?
When I scroll down the mouse, more content are loaded in html page. Is there any way that I can expand the whole html page so that all content will be loaded in one go?
window.scrollTo(0,document.body.scrollHeight);
The above code helps me to get the new content of html page but also it redirect me to the bottom of page. Is there any way to stay on top of the page and using scrollto function or any other way to get the whole content in one go?
Mostly there are ajax requests being sent for the content to get loaded, so I don't think there's any way to get all content in one go.
As we scroll down & reach the bottom an ajax request is sent for more content and it repeats. Since, there's no way to combine all ajax requests in one go, unless you have write permission to the webpage, all that can be done is scrolling.
Of course, scroll back up when scrolled down, might appear like a bit of flickering in some browsers(may be not).
I do not know if i asked correctly in Question Title, but here i am going to describe in brief
I have an UIWebView and loading the content based on div and each div has unique id on loadRequest.
As though my content was too large so i break down into pieces and loading the remaining content once you tap on 'Read More'
This 'Read More' event fire on autoscroll which i am handling through javascript. so once that event is fired it just append data (for which i have another method) by using window.location.href = div1+div2(its just an example).
Now the main problem is when i scrollDown and wherver i get the 'Read More' message and it auto fire then it adds the data to the current div and show (User feel its an continue reading) but when
I scroll towards to up
It behaves weired because it just append the data to the div and scroll to setYScroll(updatedlocation);
updatedlocation is used for when we are adding the content to the div and it should scroll to the same position where the user was.
so lets start with an example, assume currently i am reading the div2 and when i scroll up'Read More' events fired and add div1 to div2 and then web view delegate shouldStartLoadWithRequest called.
so every time its update the content to div2 when you are scrolling up but first it takes me the previous s location of div1 and then take me to div2 location where i was currently reading.
so it feel like really weired, suddenly it takes me to somewhere for a while and take me to my current position within friction of second
I tried with this solution,
I thought to take the screen shot and create an imageView with that screenshot image of the current UIWebView and put on webview whenever 'Read More' event is happening. once the web view loading is done remove the imageView and display the webview.
but this is happening in the same way, the problem is every thing is happening under the webview delegate. i still could not figure out whats happening? The solution of this problem am i on right trackj or is there any better solution for that
I have a similar situation. What I do is have two UIWebViews on top of each other. When it is time to update one view, I grab the scroll position, load the new data in the hidden UIWebView, when the other UIWebView is done loading its data it sets its scroll position to the current scroll position of the first webview, then hides the first webview and unhides itself.
Its pretty seamless and works very well.
I suspect that the "jump" you experience depends on the fact that the web view is fully redrawn (and we all know that UIWebView is slow).
So, I see 2 options:
implement the "Read more" mechanics fully in javascript by means of Ajax;
instead of loading data into the view using loadRequest, make a NSConnection to that url and then update the web view by injecting in it the HTML you got from NSConnection through stringByEvaluatingJavaScriptFromString.
The second option is possibly nicer because it is fully SDK based, but you will readily see that it is far more complex than the first one. The two of them will work and I am pretty sure that will give you the kind of smooth behavior you are after.
If I understand your question correctly it sounds like you're trying to implement your own handling of the "infinite scroll" concept.
It might be worth your while to check out one of the many infinite scroll libraries that are already out there. If one doesn't fit your requirements perfectly you might find the inspiration you need to fix the one you have now.
I've got an ASP.NET page that takes a long time to download and returns partial results as it's loading (as per my previous question). On the page I have some links to download files, ie. the response headers contain "Content-Disposition: attachment", so that the browser doesn't navigate away from the page. However, if the user clicks one of these links while the page is still loading it stops loading - normal behaviour, but not what I want in this case. I can get around that by adding target=_"blank" to the links, but this momentarily opens a new window and the closes it again (once the browser realises it's an "attachment"). Is there any way to avoid having those links stop the current page load without this new window trick? JavaScript is OK.
You could put a hidden iframe on the page and target that. (or use javascript to generate one dynamically).
Not sure it if will help, but try to add an iframe to the page and have your links do document.getElementById('your_iframe').location = 'your_url'
You could try a meta refresh
<meta http-equiv="refresh" content="2;url=http://path.to/file.download">