Hiển thị HTML trong WebView với CSS tùy chỉnh

Question 1

Ứng dụng của tôi đang sử dụng JSoup để tải xuống HTML của trang bảng tin (giả sử trong trường hợp này, đó là một trang chứa các bài đăng của một chủ đề nhất định). Tôi muốn lấy HTML này, loại bỏ các mục không mong muốn và áp dụng CSS tùy chỉnh để tạo kiểu cho nó thành 'di động' trong WebView.

Tôi có nên đưa các kiểu vào HTML khi tôi xử lý nó (vì tôi vẫn sẽ xử lý nó) hay có cách nào tốt để thêm tệp CSS vào nội dung ứng dụng của tôi và chỉ cần tham khảo nó. Tôi nghĩ cái thứ hai sẽ là lý tưởng, nhưng không chắc làm thế nào để tiếp tục nó.

Tôi thấy gợi ý trong WebView của loadDataWithBaseURL mà bạn có thể tham khảo các tài sản địa phương, nhưng không chắc chắn làm thế nào để sử dụng nó.

Question 2

Bạn có thể sử dụng WebView.loadDataWithBaseURL

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

Và chỉ sau đó WebView mới có thể tìm và sử dụng các tệp css từ thư mục nội dung.

ps Và, có, nếu bạn tải tệp html của mình vào thư mục tài sản, bạn không cần chỉ định url cơ sở.

Question 3

Tôi giả định rằng style-sheet "style.css" của bạn đã được đặt trong thư mục tài sản

tải trang web bằng jsoup:

doc = Jsoup.connect("http://....").get();

loại bỏ các liên kết đến các biểu định kiểu bên ngoài:

// remove links to external style-sheets
doc.head().getElementsByTag("link").remove();

đặt liên kết tới bảng định kiểu cục bộ:

// set link to local stylesheet
// <link rel="stylesheet" type="text/css" href="style.css" />
doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");

tạo chuỗi từ jsoup-doc / web-page:
```
String htmldata = doc.outerHtml();
```

hiển thị trang web trong chế độ xem web:

WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);

Question 4

đây là giải pháp

Đặt html và css của bạn vào thư mục / tài sản / của bạn, sau đó tải tệp html như sau:

    WebView wv = new WebView(this);

    wv.loadUrl("file:///android_asset/yourHtml.html");

thì trong html của bạn, bạn có thể tham chiếu css của mình theo cách thông thường

<link rel="stylesheet" type="text/css" href="main.css" />

Question 5

Nó đơn giản như sau:

WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");

Và some.html của bạn cần phải chứa một cái gì đó như:

<link rel="stylesheet" type="text/css" href="style.css" />

Question 6

Nếu bạn có CSS của mình trong bộ nhớ tệp nội bộ, bạn có thể sử dụng

//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);

// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                      + "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";

//load the html with the baseURL, all files relative to the baseURL will be found 
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

Question 7

Có thể có tất cả nội dung được hiển thị trong trang, trong một div nhất định không? Sau đó, bạn có thể đặt lại css dựa trên id và làm việc từ đó.

Giả sử bạn cung cấp div id = "ocon"

Trong css của bạn, có một định nghĩa như:

#ocon *{background:none;padding:0;etc,etc,}

và bạn có thể đặt các giá trị để xóa tất cả css áp dụng cho nội dung. Sau đó, bạn chỉ cần sử dụng

#ocon ul{}

hoặc bất cứ điều gì, sâu hơn trong biểu định kiểu, để áp dụng các kiểu mới cho nội dung.

Question 8

Bạn có thể Sử dụng liên kết Css Trực tuyến Để đặt Phong cách trên nội dung hiện có.

Vì vậy, bạn phải tải dữ liệu trong webview và bật Hỗ trợ JavaScript.

Xem mã bên dưới:

   WebSettings webSettings=web_desc.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDefaultTextEncodingName("utf-8");
    webSettings.setTextZoom(55);
    StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
    sb.append(currentHomeContent.getDescription());
    sb.append("</body></HTML>");
    currentWebView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

Ở đây Sử dụng StringBuilder để nối String cho Style.

sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());