javaandroidandroid-webview

Android WebView: display only some part of website


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");
}

Solution

  • 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?