在Android WebView中删除页眉和页脚

Question

I am trying to load a responsive webpage in a webview component. But I would like to strip the header and footer of the webpage and load the webview with just the body of the webpage. How can this be achieved in an android webview.

<div class="header-container">
<header class="header clearfix" ng-include="'/modules/core/homepage/header-partial.html'"></header>
</div>

Answer 1

I was able to remove the header and footer and load the webpage using loadDataWithBaseURL() method

Document document = Jsoup.connect(mUrl).get();
document.getElementsByClass("header-container").remove();
document.getElementsByClass("footer").remove();
WebSettings ws = mWebView.getSettings();
ws.setJavaScriptEnabled(true);
//mWebView.loadData(document.toString(),"text/html","utf-8");
mWebView.loadDataWithBaseURL(mUrl,document.toString(),"text/html","utf-8","");

As per the developer docs :

Note that JavaScript's same origin policy means that script running in a page loaded using this method will be unable to access content loaded using any scheme other than 'data', including 'http(s)'. To avoid this restriction, use loadDataWithBaseURL() with an appropriate base URL.

http://developer.android.com/reference/android/webkit/WebView.html#loadData(java.lang.String , java.lang.String, java.lang.String)

Answer 2

If you want to edit html, i'd recommend using a html parser like jsoup. Them remove header and footer, and lastly load the data into a WebView

try {

    // Load the html into jsoup
    Document doc = Jsoup.connect("http://your-site.com/").get();

    // find and remove header
    Element header = doc.getElementById("your-header");
    header.remove();

    // find and remove footer
    Element footer = doc.getElementById("your-footer");
    footer.remove();

    // Load data into a WebView
    WebView wv = (WebView) findViewById(R.id.webView);
    WebSettings ws = wv.getSettings();
    ws.setJavaScriptEnabled(true);
    wv.loadData(doc.toString(), "text/html", "utf-8");

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