美文网首页
解决ScrollView+WebView,改变字体大小,页面留白

解决ScrollView+WebView,改变字体大小,页面留白

作者: 请叫我果爸 | 来源:发表于2020-07-24 13:46 被阅读0次

    前言

        老规矩,先感觉给我提供思路的作者及文章《ScrollView与WebView结合使用时,设置webview字体大小的时候出现下方留白的终极解决方案》
        因为需求的原因,需要上面是网页,下面是一些推荐。上级不想用网页去展示,因为打开速度太慢了。只能通过加载数据,获取html源代码展示出网页,然后获取推荐内容,通过ListView展示数据。这时候我想了有两种方案,一种是ScrollView+WebView+ListView,以及一种是拼接HTML。结果上级又不让用拼接HTML,只能使用ScrollView+WebView方案,如果没有设置字体大小这种产品需求,我也不会有这个问题,正式因为这种需求,加上这个方案,才搞出来这个幺蛾子,。

    解决方案

    思路还是通过JS去获取body内容的Height。

    step.1 设置JS接口监听

        @JavascriptInterface
        fun resize(height: Int) {
            LogUtils.i("resize contentHeight=$height Height=${height * resources.displayMetrics.density} ")
            runOnUiThread {
                val wblp = webView?.layoutParams
                wblp?.height = (height * resources.displayMetrics.density).toInt()
                webView?.layoutParams = wblp
            }
        }
    

    step.2 注册JS方法

        webView?.addJavascriptInterface(this, "notifyResize")
    

    step.3 设置setting.textZoom去改变字体的大小

          webView?.settings?.textZoom = when (it) {
             0 -> 80
             1 -> 100
             2 -> 120
             3 -> 140
             else -> 100
          }
    
         webView?.loadUrl("javascript:window.notifyResize.resize(document.body.getBoundingClientRect().height);")
    



    但是我一度疑惑,这个方法和webView?.contentHeight有什么区别呢?虽然获取的到是html的真实高度,然后乘以屏幕密度,和webView?.contentHeight的高度是一样的啊。
    而且我设置放大后,再缩小字体依旧并不生效。contentHeight一直就是最大状态了。


    为什么大家都推崇这个解决方案,但是我不生效呢?
    后来继续查原因,才发现大家都一样。如果您使用的是webView?.loadUrl,使用这个方案是可以的,但是如果您使用的是webView?.loadDataWithBaseURL就会失败。


    重要的来了,那使用webView?.loadDataWithBaseURL这个方案怎么解决呢?
    我们只要添加下面这段代码,重新设置body的高度就可以了。
    webView?.loadUrl("javascript:(function() {document.body.style.height='initial';})()")

    最终使用

          viewModel.contentSize.observe(viewLifecycleOwner, Observer {
                webView?.settings?.textZoom = when (it) {
                    0 -> 80
                    1 -> 100
                    2 -> 120
                    3 -> 140
                    else -> 100
                }
    
                webView?.loadUrl("javascript:(function() {document.body.style.height='initial';})()")
                webView?.loadUrl("javascript:window.notifyResize.resize(document.body.getBoundingClientRect().height);")
         })
    

    相关文章

      网友评论

          本文标题:解决ScrollView+WebView,改变字体大小,页面留白

          本文链接:https://www.haomeiwen.com/subject/apdjlktx.html