Android WebView with CSS modification of hr tag_问答_开发者

Android WebView with CSS modification of hr tag

开发者 https://www.devze.com 2023-02-18 05:47 出处：网络

I am working on an app which needs to display some dynamically queried HTML content, including CSS. WebView seems to be the best implementation for this type of work.

I ran into an error when testing it out, and tracked it down to the following css tag:

hr{width:100%!important}

Android WebView seems to be incapable of displaying any html that includes this line. Some research shows开发者_开发技巧 that the attribute was deprecated (link: http://www.w3schools.com/tags/att_hr_width.asp), but it works on all browsers.

Below is some html, including this line. It will render fine in any browser.

<html>
  <head>
    <style type=\"text/css\">
      hr{width:100%!important}
    </style>
  </head>
  <body>
    Some text
  </body>
</html>

And, in Android:

           String exampleCSS = "<html><head><style type=\"text/css\">" +
                           "hr{width:100%!important}" +
                           "</style></head><body>" +
                           "Some text" +
                           "</body></html>";
           WebView webView = (WebView) findViewById(R.id.web_html_about);
           webView.loadData(exampleCSS, "text/html", "utf-8");

The result is a "Web page not available" error in the webview.

Is this a known issue due to deprecation? Is it a bug with WebView? Is there any known work around for such issues?

It looks like the android webview passes content using the data:// scheme, and as a result, you would have to urlencode the content for it to work as expected. In my case, the css/html is provided to me, so I had to use the following work around:

Example

    ((WebView) findViewById(R.id.web_body)).loadDataWithBaseURL(null, content, null, "utf-8", null);

This seems to work, and get passed this particular issue above. Thanks to all that answered. Dale.

Hr is not depreciated, though it has been given symantic meaning. It indicates a change in content.

I'm not sure what is causing your issue, but I can tell you your markup as written is unnecessary. Hr is a block level element, and so it already has a 100% width.