사용자 정의 CSS를 사용하여 WebView에서 HTML 렌더링
내 앱은 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- 폴더에 있다고 가정합니다.
jsoup으로 웹 페이지를로드합니다.
doc = Jsoup.connect("http://....").get();외부 스타일 시트에 대한 링크 제거 :
// remove links to external style-sheets doc.head().getElementsByTag("link").remove();로컬 스타일 시트에 대한 링크 설정 :
// 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");jsoup-doc / web-page에서 문자열 만들기 :
String htmldata = doc.outerHtml();웹보기에 웹 페이지 표시 :
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", "");
Is it possible to have all the content rendered in-page, in a given div? You could then reset the css based on the id, and work on from there.
Say you give your div id="ocon"
In your css, have a definition like:
#ocon *{background:none;padding:0;etc,etc,}
and you can set values to clear all css from applying to the content. After that, you can just use
#ocon ul{}
or whatever, further down the stylesheet, to apply new styles to the content.
참고URL : https://stackoverflow.com/questions/4950729/rendering-html-in-a-webview-with-custom-css
'Development Tip' 카테고리의 다른 글
| React Router의 동일한 구성 요소에 대한 여러 경로 이름 (0) | 2020.10.13 |
|---|---|
| 모범 사례 : 클래스 정의 내에서 공용 / 보호 / 개인 순서 지정? (0) | 2020.10.13 |
| "pipenv run"으로 생성 된 virtualenv를 제거하는 방법 (0) | 2020.10.13 |
| JavaScript-정수 테스트 (0) | 2020.10.13 |
| JavaScript에서 페이지가 유효한지 확인-ASP.NET (0) | 2020.10.13 |