Question

我正在尝试使用Android将合理大小的html嵌套列表加载到WebView中。问题是，当我尝试加载html时，它似乎是空白的。

现在我尝试了几种不同的方法。我首先尝试了W3Schools“自己动手”框中的代码 - W3Schools。从这里开始，一旦达到一定的大小，就会显示错误。因此，从下面的代码中，如果你摆脱了最后几个标题，它会显示为特定大小。

我已将html代码放入本地html文件中，并且所有浏览器都将其渲染得很好。

我已将此文件放入Android中的assets文件夹中，并尝试将该文件加载到WebView中，这是同一个故事。我在列表中达到了一定的大小，并没有显示任何内容。我使用以下代码加载了它：

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

我还直接加载了html代码，这是同一个故事。一旦达到一定的大小，它就不会显示任何内容。我已使用以下代码加载此html内容：

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

我尝试用空字符串和网址替换空值，但仍然没有区别。

有趣的是，带有数据的本地文件将通过桌面浏览器完美呈现。使用W3Schools自己尝试输入时，html内容将无法呈现。 Android不会显示文件或html内容。但是，在iOS上，代码显示正常。

我真的很坚持我可以继续下去，有没有人对问题是什么或者遇到类似问题有任何想法？

以下是我正在使用的html代码：

<!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>

Answer 1

我不知道你为什么遇到麻烦我尝试了相同的代码并且工作正常请检查一下 -

public class MainActivity extends Activity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView=(WebView)findViewById(R.id.web);
        webView.loadUrl("file:///android_asset/test.html");

    }

}

这是附带的截图 -

screen shot

Answer 2

请参阅以下编写的代码并找到输出....

public class MainActivity extends Activity {

    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = (WebView)findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/test.html");
    }
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

<!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>

Answer 3

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

由于标题是关于HTML嵌套列表的，我们首先需要确保HTML源本身是正确的，所以我使用 W3Schools 和Android股票浏览器检查了它。

W3Schools 不允许在"Try It Yourself"中提交超过一定长度的代码，例如5000。当您单击“提交代码”按钮时，他们只需在JS中进行检查即可。因此，在W3Schools中显示“错误”并不一定意味着HTML代码中存在错误。此外，如果您要验证HTML代码，可以参考W3 Validator。
使用Android股票浏览器在我的设备上正常运行示例HTML页面。如果您从webkit引擎打印DOM树和渲染树，那么您也会发现它们都是正确的。

然后最终@Graham识别出与Android硬件加速配置有关的问题：

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

关于这个主题，在Android Doc中有一个非常详细的解释，正如@ZalaJanaksinh在另一篇文章中指出的那样。

希望有帮助...

Answer 4

我有同样的问题 - 我甚至可以在logcat中看到chrome javascript控制台输出。事实证明布局是个问题。

我使用布局设计器将webview拖到我的活动中，并自动将其添加到布局xml文件中：

<WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

我看着Manish Srivastava的帖子，发现他们的网页布局不同。我把我变成了：

<WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView" />

一切都很好。我希望这有助于将来的某个人！

Answer 5

这是渲染html文本的问题设备。当用户从SD卡等加载大图像（大小）时，会出现同样的问题。您的代码中没有任何更改只需在Android清单文件中添加以下属性。

android:hardwareAccelerated="false"

默认情况下，这是真的。在开发者社区关于使用 android：hardwareAccelerated 的非常强烈的争论!! 检查此链接 - 如何使用android：hardwareAccelerated。How To Use. 链接Use or Not

的另一件事

查看html嵌套列表时，Android WebView加载空白

5 个答案: