How to display some part of webpage in android webview?

Question

I am using an android WebView and I want to load webpage on my android device but display only some parts of webpage, not the whole page.

Is this possible?

Are you showing your website URL or someone else? – Vaibhav Mule Jun 21 '15 at 04:16 — Vaibhav Mule, Jun 21 '15 at 04:16

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

I think what you want to do is remove some content from your HTML page and then display it in the WebView. This is possible via javascript so just before you display the page add some javascript code that will remove the elements you don't want.

LIKE

final WebView mWebView = (WebView) findViewById(R.id.mWebViewId);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
 @Override
public void onPageFinished(WebView view, String url)
{
mWebView.loadUrl("javascript:(function() { " +
        "document.getElementById('tableid')[0].style.display='none'; " +
        "})()");
}
});
mWebView.loadUrl(youUrl);

Just replace document.getElementsByTagName('tableid') with document.getElementsByTagName('theElementYouWantToRemove') for every element and you're set. Original solution can be found at Display a part of the webpage on the webview android

What about the only show the selected part. Without removing the unwanted part, selecting the wanted one. For example, if someone add new div to web page, you must change the client code. — Karacago, Aug 29 '17 at 07:58

score 1 · Answer 2 · answered Jun 28 '22 at 09:19

for those who still looking for a solution:

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
      @Override
      public void onPageFinished(WebView view, String url)
      {
          mWebView.loadUrl("javascript:(function() { " +
                 "document.getElementsByClassName('className1')[0].remove();
                  document.getElementsByClassName('className2')[0].remove();
                  document.getElementsByClassName('className3')[0].remove();" +
                        "})()");
            }
        });
        webView.loadUrl(url);

score 0 · Answer 3 · answered Mar 11 '21 at 17:20

In Kotlin in this way:

view.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView, url: String) {
                view.loadUrl(
                    "javascript:(function() { " +
                            "var head = document.getElementsByClassName('header')[0].style.display='true'; " +
                            "var head = document.getElementsByClassName('art-bnr')[0].style.display='none'; " +
                            "var head = document.getElementsByClassName('container-box')[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(url)

How to display some part of webpage in android webview?

3 Answers3

Linked