Android的WebView中载入空白查看HTML嵌套列表时 [英] Android WebView loading blank when viewing html nested lists

查看：219
本文介绍了Android的WebView中载入空白查看HTML嵌套列表时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想合理大小的HTML嵌套列表加载到采用Android网页视图。问题是，当我尝试加载HTML，它显示为空白。

现在我已经试过这几个不同的方式。我首先尝试W3Schools的内code亲自尝试框 - W3Schools的。从这里，一旦我一定规模后，它会显示错误。因此，从下面的code，如果你摆脱过去几个标题，就显示正常，直到一个特定的大小。

我已经把HTML code到一个本地HTML文件，所有的浏览器渲染它的罚款。

我放在这个文件放到内的Andr​​oid我的资产文件夹，并试图将文件加载到web视图，它是同样的故事。我得到的名单上一定规模，并没有显示任何内容。我用下面的code加载这样的：

  wv_content.loadUrl（文件：///android_asset/test.html）;

我也直接装在html code，这是同样的故事。一旦它到达一定规模时，它不会显示任何内容。我已经通过以下code加载这个网站的内容：

  wv_content.loadDataWithBaseURL（NULL，htmlData，text / html的，UTF-8，NULL）;

我试着空字符串和URL，但仍然没有区别更换空值。

所以，有趣的是，随着数据的本地文件将完全通过桌面浏览器渲染。使用W3Schools的亲自尝试输入时，HTML内容将不会渲染。 Android将不显示文件或HTML内容。不过不失，在iOS上，code显示正常。

我真的坚持我该怎么继续，有没有人对什么问题或所遇到的任何类似什么想法？

以下是HTML code，我使用：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;身体GT;＆LT;醇型='我'＆GT;
    ＆LT;立GT;标题1＆LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题2'; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题3'; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题4℃; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题5℃/李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题6≤/李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题7 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题8示/李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题9 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题10 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题11 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题12 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题13 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题14 LT; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;    ＆LT;立GT;标题15℃; /李＆GT;    ＆LT;醇型='A'＆GT;
       ＆LT;立GT;副标题1 LT; /李＆GT;
       ＆LT;立GT;副标题2'; /李＆GT;
       ＆LT;立GT;副标题3'; /李＆GT;
       ＆LT;立GT;副标题4℃; /李＆GT;
       ＆LT;立GT;副标题5℃/李＆GT;
    ＆LT; / OL＆GT;＆LT; / OL＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;


解决方案

（重写这篇文章根据@格雷厄姆的要求，希望它可以帮助总结问题，同时也为了获得赏金。:)））

由于题目是关于HTML嵌套列表，我们首先需要确保的HTML源代码本身是正确的，所以我查了一下，这两个是 W3Schools的和Android浏览器的股票。


  1. W3Schools的 不允许提交code超过一定的长度，像5000，在 亲自尝试。他们只是简单地在JS检查此当您单击提交code按钮。所以显示W3Schools的错误并不一定意味着一些错误在你的HTML code。此外，如果你想验证你的HTML code，你可以参考 W3验证。


  2. 样本HTML页面使用作品的Andr​​oid浏览器的股票我的设备上的罚款。如果打印DOM树和呈现来自WebKit引擎的树，那么你也会发现它们都正确。


后来终于@Graham找出问题，涉及到Android硬件加速配置：

  setLayerType（View.LAYER_TYPE_SOFTWARE，NULL）;

关于这个话题有一个在 Android的文件有很详细的解释，就像@ZalaJanaksinh在另一篇文章指出。

希望帮助...

I'm trying to load a reasonably sized html nested list into a WebView using Android. The problem is that when I try to load the html, it appears to be blank.

Now I've tried this a couple of different ways. I firstly tried the code within the W3Schools "Try It Yourself" box - W3Schools. From here, once I get to a certain size, it displays an error. So from the code below, if you get rid of the last few Headings, it displays fine up until a particular size.

I've put the html code into a local html file, and all browsers render it fine.

I've placed this file into my assets folder within Android, and tried to load the file into the WebView, and it's the same story. I get to a certain size on the list and it doesn't display anything. I've loaded this using the following code:

wv_content.loadUrl("file:///android_asset/test.html");

I've also loaded the html code directly, and it's the same story. Once it gets to a certain size, it doesn't display anything. I've loaded this html content by using the following code:

wv_content.loadDataWithBaseURL(null, htmlData, "text/html", "utf-8", null);

I've tried replacing the nulls with empty strings, and urls, but still no difference.

So the funny thing is, a local file with the data will render perfectly through the desktop browser. The html content won't render when inputted using the W3Schools Try It Yourself. Android won't display the file or the html content. But yet, on the iOS, the code displays fine.

I'm really stuck to how I can proceed, has anyone any ideas on what the problem is or have come across anything similar?

The following is the html code that I'm using:

<!DOCTYPE html>
<html>
<body>

<ol type='I'>
    <li>Heading 1</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 2</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 3</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 4</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 5</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 6</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 7</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 8</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 9</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 10</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 11</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 12</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 13</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 14</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

    <li>Heading 15</li>

    <ol type='a'>
       <li>Sub Heading 1</li>
       <li>Sub Heading 2</li>
       <li>Sub Heading 3</li>
       <li>Sub Heading 4</li>
       <li>Sub Heading 5</li>
    </ol>

</ol>

</body>
</html>

解决方案

(Rewriting this post as per @Graham's request, hoping it could help summarize the issue, and also in order to get the bounty. :)) )

Since the title is about HTML nested lists, we first need to make sure the HTML source itself is correct, so I checked that both with W3Schools and Android stock Browser.

  1. W3Schools does not allow submitting code exceeding a certain length, like 5000, in "Try It Yourself". They just simply check this in JS when you click the Submit Code button. So showing "error" in W3Schools does not necessarily mean something wrong in your HTML code. Moreover if you want to validate your HTML code, you can refer to W3 Validator.

  2. The sample HTML page works fine on my device using Android stock Browser. If you print the DOM tree and render tree from webkit engine then you will also find them both correct.

Then finally @Graham identify the problem, which relates to Android HW acceleration configuration:

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Regarding this topic there's a very detailed explanation in Android Doc, just as @ZalaJanaksinh indicated in another post.

Hope that helps...

这篇关于Android的WebView中载入空白查看HTML嵌套列表时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆