使用自定义 CSS 在 WebView 中呈现 HTML

我的应用程序正在使用 JSoup 来下载留言板页面的 HTML (让我们假设它是一个包含给定线程的帖子的页面)。我想采取这个 HTML，删除不需要的项目，并应用自定义的 CSS 样式它是’移动’在一个网络视图。

当我处理它的时候，我应该把样式注入到 HTML 中吗(因为我无论如何都要处理它) ，或者有一个很好的方法来添加一个 CSS 文件到我的应用程序的资产中，并简单地引用它。我认为后者将是理想的，但不确定如何去做。

我在 WebView 的 LoadDataWithBaseURL中看到了提示，您可以引用本地资产，但不确定如何利用它。

110707 次浏览
小开

是否有可能在页面中呈现给定 div 中的所有内容？然后您可以根据 id 重置 css，并从那里开始工作。

假设你给你的 div id = “ ocon”

在你的 css 中，定义如下:

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

并且您可以设置值来清除所有应用到内容的 css。 在那之后，你只需要

#ocon ul{}

在样式表的下面，将新样式应用于内容。

小开

这就是解决办法

把 html 和 css 放在/asset/文件夹中，然后像这样加载 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" />
小开
最佳答案

你可以用 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 文件。

而且，是的，如果从资产文件夹加载 html 文件，则不需要指定基 URL。

小开

我假设您的样式表“ style.css”已经位于 asset-file 中

  1. 在网页上加载 jsoup:

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

  2. remove links to external style-sheets:

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

  3. set link to local style-sheet:

    // 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. make string from jsoup-doc/web-page:

    String htmldata = doc.outerHtml();

  5. display web-page in webview:

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

如果在内部文件存储中有 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", "");
小开

您可以使用在线 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 为 Style 附加 String。

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

提交答案