How to remove the header in Android WebView? (While Loading)

Issue

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 completely. 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);" +
                        "})()");
            }
        });

Solution

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

            }
}

Answered By - realpac