Display a part of the webpage on the webview android

Question

I want to make an app which loads the content from the webpage into webview. I want to show only a particular thing in the entire webview, not the whole content of the webpage.

Here is an example. If I use: http://us.m.yahoo.com/w/search%3B_ylt=A2KL8xs0vUBQMg0AwAkp89w4?submit=oneSearch&.intl=us&.lang=en&.tsrc=yahoo&.sep=fp&p=digital+cameras&x=0&y=0 as the URL for the webview, it loads all the contents of the page on the webview. But I want to remove the banner of the page and show it on the webview of my application.

I have tried using adblocker using CSS tags, but that is not helping me. Please give me some idea for overcoming this problem.

Thanks.

score 19 · Accepted Answer · answered Sep 04 '12 at 15:24

19

Thank You for the answer Zyber. I have solved it using injection of JavaScript in the code for WebView in android.

final WebView webview = (WebView)findViewById(R.id.browser);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient() {
 @Override
public void onPageFinished(WebView view, String url)
{
    webview.loadUrl("javascript:(function() { " +
            "document.getElementsByTagName('header')[0].style.display="none"; " +
            "})()");
}
});
webview.loadUrl("http://code.google.com/android");

This solved my purpose and it is easy to use to.

answered Sep 04 '12 at 15:24

Anupam

3,742
18
55
87

"document.getElementsByTagName('header')[0].style.display="none"; " + "})()"); is header is the name of div class , and none is cannot be resolved in studio – Abhi Soni Dec 11 '16 at 12:16
You approach works fine. But it creates bumpy output. – Vishal Kumar Sahu Feb 26 '19 at 00:19

score 4 · Answer 2 · answered Apr 12 '18 at 11:23

I got the solution to add this:

view.getSettings().setJavaScriptEnabled(true);
        view.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url)
            {
                view.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByClassName('header')[0].style.display='none'; " +
                        "var head = document.getElementsByClassName('blog-sidebar')[0].style.display='none'; " +
                        "var head = document.getElementsByClassName('footer-container')[0].style.display='none'; " +
                        "})()");

            }
        });
        view.loadUrl("your url");

Adding (var head =) looks like to hide my class in webview.

I hope this will be helpful for someone.

score 3 · Answer 3 · answered Sep 04 '12 at 13:27

3

check Jsoup it provides an library which gives an easy way of extracting Html elements from a webpage

DefaultHttpClient client = new DefaultHttpClient();
HttpGet get = new HttpGet(url.toURI());
HttpResponse resp = client.execute(get);

String content = EntityUtils.toString(resp.getEntity());
Document doc = Jsoup.parse(content);
Elements ele = doc.select("div.classname");

This example executes an Http GET and then extracts an Div element with the class "classname" which you can then load in your webview

answered Sep 04 '12 at 13:27

Zyber

1,034
8
19

1

how you put this element in a webview ? can you pos example full ? – Feb 03 '16 at 09:31
This does not answer the OP question. Using Jsoup just to parse the loaded html. You have to use webView twice to load it – kidnan1991 Jul 26 '17 at 03:56

Display a part of the webpage on the webview android

3 Answers3

Linked