Android WebView: display only some part of website

Question

I wanted to know if it was possible to display only certain parts of a website in a WebView. For example I have this website with the following html:

<html>
 <body>
<div id="1">ID 1</id>
<div id="2">ID 2</id>
<div id="3">ID 3</id>
</body>
</html>

it is possible to display in WebView only, for example, the contents of the div with id="3"? My code is WebWiew:

WebViewClient WebClient = new WebViewClient(){
        public boolean shouldOverrideUrlLoading(WebView view, String url){
          view.loadUrl(url);
          return true;
        }
    };


    WebView myWebView = (WebView) findViewById(R.id.webView1);
    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.getSettings().setBuiltInZoomControls(true);
    myWebView.getSettings().setBuiltInZoomControls(true);
    myWebView.setWebViewClient(WebClient);
    myWebView.loadUrl("https://www.example.com");

Please do not locate your code 'off-site', especially with such small code snippets! Instead update your question and use code blocks to properly show your code in the question — Veger, Jan 20 '13 at 11:43

score 11 · Accepted Answer · edited May 23 '17 at 10:29

11

You can do this by extending WebViewClient and injecting some javascript which will render your web Page

public class MyWebClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
}

@Override
public void onPageFinished(WebView view, String url) {
    view.loadUrl("javascript:your javascript");
}
}
.........
final MyWebClient myWebViewClient = new MyWebClient();
mWebView.setWebViewClient(myWebViewClient);

For hiding elements use view.loadUrl("javascript:document.getElementById(id).style.display = 'none';)

More info In Android Webview, am I able to modify a webpage's DOM?

edited May 23 '17 at 10:29

Community

1
1

answered Jan 20 '13 at 13:09

Roman Nazarevych

7,513
4
62
67

2

So for example, if I want to display a div with class "example" I have to write: view.loadUrl("javascript:document.getElementByClassName('example')"); right? – Enzo Jan 20 '13 at 14:52
@user1960978 You can use the flowing commands for hiding `document.getElementById(id).style.display = 'none';` and for showing `document.getElementById(id).style.display = 'block';` – Roman Nazarevych Jan 21 '13 at 09:41
where I can find my required javascript ? Can you please explain ? – nadeem gc Feb 28 '14 at 13:45
@nadeemgc replace `your javascript` in `view.loadUrl("javascript:your javascript");` with javascript which is needed for you. – Roman Nazarevych Feb 28 '14 at 16:55
@Lemberg I got you. but I am unclear that what will be my javascript. say e.g. I want to hide Gmail button from www.google.com page. What is my javascript code now for this purpose ? – nadeem gc Feb 28 '14 at 16:58
Use `document.getElementsByClassName('someClass').style.display = 'none'` or `document.getElementById(id).style.display = 'none';` – Roman Nazarevych Feb 28 '14 at 17:23
doing this in onpagefinished will initially show the content .. how to avoid that? – Siddarth G Nov 08 '17 at 19:35

score 3 · Answer 2 · edited Jan 06 '17 at 16:18

3

The most basic thing to understand here is whether the element we are referring to inside the web html file is a class or a id. If it is a id then getElementById works perfectly. If it is a class then getElementsByClassName is required.

Following is an example that I am using.

myWebView.loadUrl
      ("javascript:(function() { " +
           "document.getElementsByClassName('header_wrapper')[0].style.display='none'; " +
           "document.getElementsByClassName('footer-contact')[0].style.display='none'; "+
           "document.getElementsByClassName('navbar-header')[0].style.display='none'; "+
           "document.getElementsByClassName('footer-social')[0].style.display='none'; "+
           "document.getElementById('footer_bottom').style.display='none'; "+
           "document.getElementById('footer_content').style.display='none'; "+
           "document.getElementById('core_mobile_menu').style.display='none'; "+
           "document.getElementById('catapult-cookie-bar').style.display='none'; "+
       "}
      )()");

edited Jan 06 '17 at 16:18

Pramesh Bajracharya

2,153
3
28
54

answered Dec 21 '16 at 08:30

Hasan Sawan

391
2
14

1

this will leave white space after hiding the contents – Siddarth G Nov 09 '17 at 10:38
When the view loads, the white spaces are there for 1/2 to 1 seconds, but they go away once the full view is loaded. It entirely depends on the device speed. – Hasan Sawan Nov 09 '17 at 11:09
no, it stays there in my case, scrollable white space – Siddarth G Nov 09 '17 at 18:14
[please help me with same issue](https://stackoverflow.com/questions/51496883/android-webview-display-only-the-content-of-the-website) – bhupathi turaga Jul 24 '18 at 12:02
It works fine but when we navigate to some other page and return by pressing the back button it does not work. – Akang Toshi Jul 03 '20 at 15:25

Android WebView: display only some part of website

2 Answers2

Linked