[android] 사용자 정의 CSS를 사용하여 WebView에서 HTML 렌더링

Program / 글쓴이

내 앱은 JSoup을 사용하여 게시판 페이지의 HTML을 다운로드합니다 (이 경우에는 주어진 스레드의 게시물을 포함하는 페이지라고 가정 해 보겠습니다). 이 HTML을 가져 와서 원하지 않는 항목을 제거하고 사용자 지정 CSS를 적용하여 WebView에서 ‘모바일’스타일로 만들고 싶습니다.

처리 할 때 스타일을 HTML에 삽입해야합니까 (어쨌든 처리 할 것이므로) 아니면 CSS 파일을 내 앱의 자산에 추가하고 간단히 참조 할 수있는 좋은 방법이 있습니까? 후자가 이상적이라고 생각하지만 어떻게해야할지 잘 모르겠습니다.

WebView의 loadDataWithBaseURL 에 로컬 자산을 참조 할 수 있다는 힌트가 있지만 활용 방법은 확실하지 않습니다.

답변

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

그리고 그 후에 만 ​​WebView가 assets 디렉토리에서 css 파일을 찾고 사용할 수 있습니다.

ps 그리고 예, 자산 폴더에서 html 파일을로드하는 경우 기본 URL을 지정할 필요가 없습니다.

답변

스타일 시트 “style.css”가 이미 assets- 폴더에 있다고 가정합니다.

  1. jsoup으로 웹 페이지를로드합니다.

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

  2. 외부 스타일 시트에 대한 링크 제거 :

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

  3. 로컬 스타일 시트에 대한 링크 설정 :

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

  4. jsoup-doc / web-page에서 문자열 만들기 :

    String htmldata = doc.outerHtml();

  5. 웹보기에 웹 페이지 표시 :

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

답변

여기에 해결책이 있습니다

html 및 css를 / assets / 폴더에 넣은 다음 다음과 같이 html 파일을로드합니다.

    WebView wv = new WebView(this);

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

그런 다음 HTML에서 일반적인 방법으로 CSS를 참조 할 수 있습니다.

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

답변

다음과 같이 간단합니다.

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

그리고 some.html에는 다음과 같은 내용이 포함되어야합니다.

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

답변

내부 파일 저장소에 CSS가있는 경우 사용할 수 있습니다.

//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", "");

답변

주어진 div에서 모든 콘텐츠를 인 페이지로 렌더링 할 수 있습니까? 그런 다음 ID를 기반으로 CSS를 재설정하고 거기에서 작업 할 수 있습니다.

div id = “ocon”을 제공한다고 가정 해 보겠습니다.

CSS에서 다음과 같은 정의를 사용하십시오.

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

모든 CSS가 콘텐츠에 적용되지 않도록 값을 설정할 수 있습니다. 그 후에는

#ocon ul{}

또는 스타일 시트 아래로 내려 가면 콘텐츠에 새 스타일을 적용 할 수 있습니다.

답변

온라인 CSS 링크를 사용하여 기존 콘텐츠 위에 스타일을 설정할 수 있습니다.

이를 위해서는 webview에서 데이터를로드하고 JavaScript 지원을 활성화해야합니다.

아래 코드를 참조하십시오.

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

여기에서 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());