Android : Inject JavaScript before loading the URL in webview

Question

I'm developing one application in which a URL is loaded in webview of the app. Through JavaScript I'm slicing out the header and footer of the webpage and showing content in the webview. My problem is that, it takes some time to slice out the header and footer of the webpage, for about 1-2 secs the header is visible and hide that immediately. I'm attaching my WebViewClient class :

private class CustomWebClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {
        progress.setVisibility(View.GONE);
        super.onPageFinished(view, url);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        doGet(url);
        return true; // super.shouldOverrideUrlLoading(view, url);
    }

    public void onLoadResource(WebView view, String url) {
        webview.loadUrl("javascript:(function() { "
                + "document.getElementsByTagName('header')[0].style.display = 'none'; "
                + "})()");

        webview.loadUrl("javascript:(function() { "
                + "document.getElementsByTagName('footer')[0].style.display = 'none'; "
                + "})()");

        webview.loadUrl("javascript:(function() { "
                + "document.getElementsByTagName('section').search_again.style.display = 'none'; "
                + "})()");
    }

}

On onLoadResource() method I'm injecting JS.

Anyone has got some idea about the problem I'm facing, please help me in overcoming this problem.

I think `onLoadResource` is not a proper place for "playing with" headers and footers, because it may be called a lot of times for every resource loaded in the page, and it's almost useless. This may slow down entire process, so you observe 2 seconds delays. You should possibly try to inject `style` tag into the `head` from `onPageStarted` event. There you can specify styles such as `.header {display: none !important;}`. — Stan, Mar 21 '13 at 08:18

guerilla · Answer 1 · 2012-09-25T06:04:36.380

0

You can use a css file with media queries for android to hide the header/footer over css

edited Sep 25 '12 at 06:04

answered Sep 25 '12 at 04:43

guerilla

405
1
4
12

How to do that? This is the first time I'm listening about this, can you give me a brief example for this. – Anupam Sep 25 '12 at 05:05
Is this your website which will be displayed in the webiew? If so than check this link for media queries: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ – guerilla Sep 25 '12 at 06:06
No, this is the third party website. – Anupam Sep 25 '12 at 06:07
Har ok. But i think it has to work if you trigger this in onLoadResource also. But I don't know if this works faster than JS so that the header is immediately hided – guerilla Sep 25 '12 at 06:15
Ya I think CSS will not give us that speed in comparison with JS, but why it is happening that it takes little time to slice out the header, onLoadresource() is the only thing we can use or do you have any other idea too? – Anupam Sep 25 '12 at 06:18
Hide the WebView until onPageFinished is called. Override the onPageFinished method and manipulate there the web content and after this set WebView visible is also a possibility – guerilla Sep 25 '12 at 06:53

Android : Inject JavaScript before loading the URL in webview

1 Answers1