I want to remove the header of the website in android 'WebView'. With the Code that I have, it works. But the problem is that the 'WebView' is removing the header after the page loaded pletely. I want to remove it, while it is loading.

Thats the code snippet:

webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url)
            {
                webView.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByTagName('header')[0];"
                        + "head.parentNode.removeChild(head);" +
                        "})()");

                webView.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByTagName('footer')[0];"
                        + "head.parentNode.removeChild(head);" +
                        "})()");
            }
        });

I want to remove the header of the website in android 'WebView'. With the Code that I have, it works. But the problem is that the 'WebView' is removing the header after the page loaded pletely. I want to remove it, while it is loading.

Thats the code snippet:

webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url)
            {
                webView.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByTagName('header')[0];"
                        + "head.parentNode.removeChild(head);" +
                        "})()");

                webView.loadUrl("javascript:(function() { " +
                        "var head = document.getElementsByTagName('footer')[0];"
                        + "head.parentNode.removeChild(head);" +
                        "})()");
            }
        });

• javascript
• android
• android-layout
• android-webview

• yes it is working fine. All you need to do is mask the entire screen until the entire site loads and remove it. – Raghunandan Commented Dec 16, 2017 at 8:47
• I'am very new on Android Studio. How can I create a mask, while it is Loading? Is it a new Layout Screen? – Sinan Kara Commented Dec 16, 2017 at 8:50

4 Answers 4

Easiest way is to inject Javascript in onLoadResource() method. Put it inside try-catch block since WebView will not know about the element before it has been loaded:

webView.setWebChromeClient(new WebChromeClient() {
           ...

            @Override
            public void onLoadResource(WebView view, String url) {

                try {
                    webView.loadUrl("javascript:(window.onload = function() { " +
                            "(elem1 = document.getElementById('id1')); elem.parentNode.removeChild(elem1); " +
                            "(elem2 = document.getElementById('id2')); elem2.parentNode.removeChild(elem2); " +
                            "})()");
                } catch (Exception e) {
                    e.printStackTrace();
                }

            }
}

ANDROID WebView-Remove header or any tag from Webpage in Android

Let's understand how's it possible, in my case I had loaded url in webview and look like below screenshot,

Now from the above view if we want to remove the header and menu portion of the Webpage. We need to use JSOUP lib with the help of which you can remove the unnecessary portion of webpage.

STEPS

1. Add jsoup lib in your app level build gradle

   pile 'org.jsoup:jsoup:1.10.3'

2. Now In activity we will use Async task as we parse / remove some html tags that leads to network operations which cannot be done directly on UI Thread. Async Task allows you to perform background operations and publish results on the UI thread. It has three methods monly used.

   onPreExecute():-Is used to display progress bar

   doInBackground():-This step is used to perform background putation that can take a long time. You cannot update any UI in this method.

   onPostExecute():-This is invoked after pletion of background task and it will update the UI.

I have defined WebView in xml like following way,

  <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webview"/>

And in MainActivity.java, I had wrote JSOUP code for remove the unnecessary portion of webpage

 public class MainActivity extends AppCompatActivity {
WebView webview;
String url="http://pixelay./";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    webview= (WebView) findViewById(R.id.webview);
    new MyAsynTask().execute();
}

private class MyAsynTask extends AsyncTask<Void, Void, Document> {
    @Override
    protected Document doInBackground(Void... voids) {

        Document document = null;
        try {
            document= Jsoup.connect(url).get();
            document.getElementsByClass("main-navigation").remove();
            document.getElementsByClass("custom-header-image").remove();

        } catch (IOException e) {
            e.printStackTrace();
        }
        return document;
    }

    @Override
    protected void onPostExecute(Document document) {
        super.onPostExecute(document);
        webview.loadDataWithBaseURL(url,document.toString(),"text/html","utf-8","");
        webview.getSettings().setCacheMode( WebSettings.LOAD_CACHE_ELSE_NETWORK );

        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, request);
            }
        });
    }
}

}

Now, it's time to see the result,

public class YourwebView extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl());
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        view.loadUrl("javascript:var footer = document.getElementById(\"footer\"); footer.parentNode.removeChild(footer); var header = document.getElementById(\"header-full\"); header.parentNode.removeChild(header);");
    }

}

And also make sure you have enabled javscript

YourwebView myWebClient = new YourwebView();
webview.setWebViewClient(myWebClient);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);

Use onPageStarted method instead of onPageFinished.

From the Android Docs here

EDIT: Reading the ments on other answers, I see you want the header to show again. Simply implement both onPageStarted and onPageEnded, hiding the header in one and showing it again in the other.