How to retrieve and modify HTML content from WebView with Http Post

Question

I'm developing an android app that shows some part of a HTML page. For the first step, I use this code provided in question How to retrieve HTML content from WebView.

Full html picture

That part i want to show

/* An instance of this class will be registered as a JavaScript interface */
class MyJavaScriptInterface
{
    @SuppressWarnings("unused")
    public void processHTML(String html)
    {
        // process the html as needed by the app
    }
}

final WebView browser = (WebView)findViewById(R.id.browser);
/* JavaScript must be enabled if you want it to work, obviously */
browser.getSettings().setJavaScriptEnabled(true);

/* Register a new JavaScript interface called HTMLOUT */
browser.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");

/* WebViewClient must be set BEFORE calling loadUrl! */
browser.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url)
    {
        /* This call inject JavaScript into the page which just finished loading. */
        browser.loadUrl("javascript:window.HTMLOUT.processHTML('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');");
    }
});

/* load a web page */
browser.loadUrl("http://example.com/gethtml.html");

but when a user click on a button in second picture a HTTP post method will be called and this will be the result HTML

my question is how retrieve and modify the Post Result Html before showing to user? and show something like this

@Mohit Yes! but the Post method is Complex so i rather not to Use JSoup :) — Mohammad Olfatmiri, Aug 25 '15 at 18:18
[this](http://glorious-arvind.blogspot.in/2012/11/webview-posturl-postdata.html) and [this](http://stackoverflow.com/a/13191602/1560398) There is a lot of examples for `postURL` out there but I don't know if it is the right solution for you — Dr ZIZO, Aug 30 '15 at 16:36

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

A simple solution could be to inject custom css code inside your webview, changing the style of the HTML element you want to display "alone".

You should inject a css like this:

#central-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    // depends on the structure of the page
}

See also in this answer for an example of how to do it.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 01 '15 at 12:01

lifeisfoo

15,478
6
74
115

So my problem is how inject this CSS before showing HTML to user ? – Mohammad Olfatmiri Sep 02 '15 at 13:10
I think you should at least try this way, since isn't too time expensive. – lifeisfoo Sep 02 '15 at 13:13

score 1 · Answer 2 · answered Sep 04 '15 at 11:25

There are at least three ways to do this that I can think of and you're really close to all of them:

You already have a rough idea of the quick and dirty method, from @lifeisfoo, although to handle both GET and POST pre-API 21 you would need to use onPageCommitVisible(WebView view, String url). As onPageFinished(WebView view, String url) and shouldOverrideUrlLoading (WebView view, String url) only trigger on GET requests.

Here's why, straight from the SDK... ..."onPageCommitVisible callback can be used to determine the point at which it is safe to make a recycled WebView visible, ensuring that no stale content is shown. It is called at the earliest point at which it can be guaranteed that onDraw(Canvas) will no longer draw any content from previous navigations. The next draw will display either the background color of the WebView, or some of the contents of the newly loaded page." it's called on all content updates POST or GET.

Slightly better, you can create a local proxy web page with the javascript interface and other fun bits already in place and stored as a resource, if the content you want is loaded into full-window iframe you can get really good control, you can interact with your proxy using onPageFinished since it's in an iframe you can interact with the target page using onLoadResource, handle interception using the old shouldInterceptRequest which returns a WebResourceResponse and deal with POST driven updates using onFormResubmission.
Finally, If API support earlier than 21 isn't a big issue the best method would be to use the new shouldInterceptRequest which takes the new WebResourceRequest object that allows you to specify different handling for different request types.

Here's the API Links for the new WebResourceRequest object and the new shouldInterceptRequest method on the WebViewClient...

http://developer.android.com/reference/android/webkit/WebResourceRequest.html

http://developer.android.com/reference/android/webkit/WebViewClient.html#shouldInterceptRequest(android.webkit.WebView, android.webkit.WebResourceRequest)

hope that helps :)

How to retrieve and modify HTML content from WebView with Http Post

Full html picture

That part i want to show

2 Answers2