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

问题

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

回答1:

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

            }
}

回答2:

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

Add jsoup lib in your app level build gradle

compile 'org.jsoup:jsoup:1.10.3'
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 commonly used.

onPreExecute():-Is used to display progress bar

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

onPostExecute():-This is invoked after completion 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.com/";

@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,

回答3:

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

回答4:

Use onPageStarted method instead of onPageFinished.

From the Android Docs here

EDIT: Reading the comments 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.

来源：https://stackoverflow.com/questions/47844004/how-to-remove-the-header-in-android-webview-while-loading

标签

javascript

android

android-layout

android-webview