All geek questions in one place

Android WebView loads blank when viewing nested html lists

I am trying to load a nested html list nested list into a WebView using Android. The problem is that when I try to load html, it seems empty.

Now I tried this in several different ways. First I tried the code in the W3Schools "Try It Yourself" window - W3Schools . From here, as soon as I get to a certain size, an error will appear. So, from the code below, if you get rid of the last few Headings, it displays a fine of up to a certain size.

I put the html code in a local html file and all browsers display it in order.

I placed this file in my resource folder in Android and tried to upload the file to WebView, and this is the same story. I get to a certain size in the list and it does not display anything. I downloaded this using the following code:

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

I also downloaded the html code directly, and this is the same story. Once it reaches a certain size, it does not display anything. I downloaded this html content using the following code:

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

I tried replacing zeros with blank lines and urls, but still no difference.

It is so funny that the local data file will be displayed perfectly through the desktop browser. Html content will not display when typed in W3Schools Try It Yourself. Android does not display html file or content. But, nevertheless, on iOS the code is displayed normally.

, , - , - ?

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>
+4
5

( @Graham, , , , .:)))

HTML, , HTML- , W3Schools, Android- Android.

  • W3Schools , , 5000, "Try It Yourself". JS, " ". , "" W3Schools - HTML-. , HTML-, W3 Validator.

  • HTML- , Android-. DOM webkit, .

, , @Graham , Android HW:

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Android Doc, , @ZalaJanaksinh .

, ...

+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

+2

html-. , () SD- .. , Android.

android:hardwareAccelerated="false"

true. , android: hardwareAccelerated ! . android: hardwareAccelerated. .

+1

. ....

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>
+1

- Chrome javascript logcat. , .

, 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" />

. , - !

+1

Source: https://habr.com/ru/post/1528971/

More articles:


All Articles