android - 如何使内容在 webview 中滚动？

问题描述

加载到 android webview 后，有一个包含某些内容的 html 似乎无法滚动。

如果直接用浏览器测试相同的 html，它看起来滚动得很好。有没有人有同样的问题？

===============

更新： 对于滚动问题，事实证明在代码中有一个监听器禁用了 MotionEvent.ACTION_MOVE。

val listener = object : OnTouchListener {
        override fun onTouch(v: View, event: MotionEvent): Boolean {
            return event.action == MotionEvent.ACTION_MOVE
        }
    }

    webview.setOnTouchListener(listener)

现在唯一的问题是为什么 iframe 不显示内容？

有两个html文件， test-scroll.html 和test-scroll-content.html (has a table as content)

测试滚动.html：

    <html>
    <head>
        <style>
            .test_container_div {
                position: relative;
                width: 360px;
                height: 80px;
                overflow: scroll;
            }


        </style>
    </head>
    <body>
    <p> table in this page</p>

    <div class="test_container_div">
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
            <tr>
                <td>zbr</td>
                <td>Ford</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Elis</td>
                <td>Liu</td>
                <td>94</td>
            </tr>
            <tr>
                <td>Pter</td>
                <td>Hans</td>
                <td>80</td>
            </tr>
        </table>
    </div>

    <p> table in iframe srcdoc</p>
    <div class="test_container_div">
        <iframe scrolling="no"
                srcdoc="<table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
            <tr>
                <td>zbr</td>
                <td>Ford</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Elis</td>
                <td>Liu</td>
                <td>94</td>
            </tr>
            <tr>
                <td>Pter</td>
                <td>Hans</td>
                <td>80</td>
            </tr>
        </table>">

        </iframe>
    </div>

    <p> table in iframe src</p>
    <div class="test_container_div">

        <iframe width="100% !important" height="300px"
                src="test-scroll-content.html"
                frameborder="1" scrolling="no" allowfullscreen=""></iframe>

    </div>

    <p>image in div </p>
    <div class="test_container_div">
        <img width="100% !important"
             src="img_2.jpg">
        </img>
    </div>

    <p>image in iframe </p>
    <div class="test_container_div">
        <iframe width="100% !important" height="200px"
                src="img_2.jpg"
                frameborder="1"  scrolling="no" allowfullscreen="">
        </iframe>
    </div>

    </body>
    </html>

测试了几个案例：

div中的表，div有height: 80px和overflow: scroll
放入 iframe 的同一张表与其srcdoc
在内容中的 iframe 加载中src="test-scroll-content.html"
an <img>has src 指向本地图像
相同的图像文件，但加载到 iframe 的 src

当直接将 test-scroll.html 加载到浏览器file:///Users/linma9/Documents/test-scroll.html中时，浏览器中的所有情况似乎都可以滚动。

（在浏览器中加载后更容易看到滚动，然后使用 chrome 开发工具进行“检查”）。

使用 android 项目并将相同的文件放在资产文件夹下。

并做

webview.loadUrl("file:///android_asset/test-scroll.html")

或将 test-scroll.html 内容作为字符串放入函数中fun getTestScrollHtmlStr() : String{}并执行以下操作：

webview.loadDataWithBaseURL("file:///android_asset/",
                getTestScrollHtmlStr(),
                "text/html", "utf-8",null)

在 android 设备上运行时，似乎双方都无法滚动内容

（另一个问题它不能显示加载的内容iframe src=？？？）

有谁知道在将内容加载到 android webview 时如何使内容可滚动（无论是否在 iframe 中）？

测试滚动内容.html：

    <html>
    <head>
    </head>
    <body>
    <p> directly put in div</p>

    <div>
        <table >
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
            <tr>
                <td>zbr</td>
                <td>Ford</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Elis</td>
                <td>Liu</td>
                <td>94</td>
            </tr>
            <tr>
                <td>Pter</td>
                <td>Hans</td>
                <td>80</td>
            </tr>
        </table>
    </div>

    </body>
    </html>

标签： androidhtmliframescrollandroid-webview

android - 如何使内容在 webview 中滚动？

问题描述

解决方案

推荐阅读