How to Show Only Specific Part of Website in Android Webview

Android WebView: display only some part of website

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?

Show only certain parts of a web page in a web view, AndroidStudio?

I solved it!

using

mWebView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView webView, String url)
        {
            webView.loadUrl("javascript:(function() { " +
                    "document.getElementsByClassName(//classname//)[index of document].style.display='none'; " +
                    "})()");
        }
    });

Android WebView:How to display only part of webpage

To solve this you need to remember, how webview works.
Which is some kind of embed 'browser' view.
You can solve it like this:

1. Making your own http get request and read string response.
2. Manipulate received string response - in your case inject Javascript code
3. Load manipulated code to the web view.

To demonstrate an example I'll use HttpRequest class that I wrote to support android 22+ (since apache's package deprecated).

Step one: request and read String response

String response=new HttpRequest("http://somedomain.com").prepare().sendAndReadString();

Step Two: manipulate response before loading

result+="<script>onload=function(){document.getElementById('sidebar').style.display='none';}</script>";

Step Three: load it to the web view

wv.loadData(result, "text/html", "UTF-8");

Simplified example for everything togather:

new AsyncTask<String, Void, String>(){
        protected String doInBackground(String[] params) {
            try {
                return new HttpRequest(params[0]).prepare().sendAndReadString();
            } catch (Exception e) {
                Log.e("***Web View - manipulated content - ERROR***", e.getMessage());
                return null;//to promote null further
            }
        }
        protected void onPostExecute(String result) {
            if(result==null)return;//Error logged, don't load anything
            result=result.concat("<script>onload=function(){document.querySelector('#sidebar').style.display='none';}</script>");
            wv.loadData(result, "text/html", "UTF-8");
        }
    }.execute("http://www.soccernews.com/teams/psg/");

WebView Show only part of Website/ hide a part of the website

here is what you need to hide the section:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    WebView webview;
    final String URL = "http://www.eventster.it";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.setWebChromeClient(new WebChromeClient());
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                view.evaluateJavascript("document.getElementById('main-carousel2').style.display='none';", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        Log.e(TAG,value);
                    }
                });
            }
        });
        webview.loadUrl(URL);
    }
}

The thing is you are asking webview to hide a content which isn't loaded yet i.e you need to wait until the webView finish loading the full page so that you can hide the content.

How to display some part of webpage in android webview?

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

---

Related Topics