web-dev-qa-db-ja.com

カスタムCSSを使用したWebViewでのHTMLのレンダリング

私のアプリはJSoupを使用してメッセージボードページのHTMLをダウンロードしています（この場合、特定のスレッドの投稿を含むページだとしましょう）。このHTMLを取得し、不要なアイテムを取り除き、カスタムCSSを適用してWebViewで「モバイル」にスタイルを設定したいと思います。

処理中にスタイルをHTMLに挿入する必要がありますか（とにかく処理するため）、またはCSSファイルをアプリのアセットに追加して参照するのに良い方法があります。私は後者が理想的だと思いますが、どうすればいいかわかりません。

WebViewの loadDataWithBaseURL には、ローカルアセットを参照できますが、使用方法がわからないというヒントがあります。

androidhtmlcsswebview
77
thedude19

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がアセットディレクトリからcssファイルを見つけて使用できるようになります。

psそして、はい、アセットフォルダーからhtmlファイルをロードする場合、ベースURLを指定する必要はありません。

117
andrii

あなたのスタイルシート「style.css」は、すでにassets-folderにあると仮定します

  1. jsoupを使用してWebページをロードします。

    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でWebページを表示します。

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

ここに解決策があります

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" />
21
longhairedsi

簡単です：

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" />
9
egore911

内部ファイルストレージに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", "");
2
lejonl

特定のdivですべてのコンテンツをページ内にレンダリングすることは可能ですか？その後、IDに基づいてcssをリセットし、そこから作業することができます。

Div id = "ocon"を指定するとします

あなたのCSSでは、次のような定義を持っています：

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

値を設定して、すべてのCSSをコンテンツに適用しないようにすることができます。その後、使用することができます

#ocon ul{}

または、スタイルシートのさらに下の部分で、コンテンツに新しいスタイルを適用します。

1
daveyfaherty