当前位置：
  1. 首页
  2. 生活百科
  3. 正文
图片描述

地址：

最近项目需求中需要实现WebView显示内容，下方显示评论列表，列表还可以分页加载。我最近做了技术预研，难度主要是实时获取WebView的高度。

效果

1 . 分页加载

js获取电脑屏幕高度_js获取屏幕高度_js获取屏幕高度

2 . 动态获取高度，点击阅读更多，会将几个隐藏的div，显示出来，造成WebView内容高度变化。

##实现使用的ScrollView包裹一层LinearLayoutjs获取屏幕高度，LinearLayout中依次防止WebView和RecyclerView。布局如下：


<com.trs.studyview.view.TRSScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.trs.studyview.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.trs.studyview.view.TRSWebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="100dp" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

</com.trs.studyview.view.TRSScrollView>

问题一，如果获取WebView高度1.通过js获取

以下是js获取高度的方法

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的高)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

下面是测试代码

package com.trs.studyview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.trs.studyview.adpater.CommentAdapter;
import com.trs.studyview.view.TRSScrollView;
import com.trs.studyview.view.TRSWebView;

public class MainActivity extends AppCompatActivity {
    TRSWebView webView;
    RecyclerView recyclerView;
    String url = "http://app.nxnews.net/ningxia/cfwz/zt/201708/t20170807_1859270.html";
    CommentAdapter adapter;
    TRSScrollView scrollView;
    Mobile mobile = new Mobile();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        scrollView = $(R.id.scrollView);
        webView = $(R.id.webview);
        recyclerView = $(R.id.recyclerView);
        WebSettings setting = webView.getSettings();
        setting.setJavaScriptEnabled(true);//支持js
        webView.addJavascriptInterface(mobile, "mobile");
        webView.setWebViewClient(mClient);
        webView.loadUrl(url);
        adapter = new CommentAdapter();
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        scrollView.setRecyclerView(recyclerView);
    }

    private class Mobile {
        @JavascriptInterface
        public void onGetWebContentHeight(String type, int height) {
            Log.i("zzz", "onGetWebContentHeight type=" + type + " height=" + height);

        }
    }

    private String[] getHeightJs = new String[]{
            "document.body.clientHeight",
            "document.body.offsetHeight",
            "document.body.scrollHeight",
            "document.body.scrollTop",
            "window.screen.availHeight"
    };

    private WebViewClient mClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            for (int i = 0; i < getHeightJs.length; i++) {
                String js = "javascript:mobile.onGetWebContentHeight("" + getHeightJs[i] + ""," + getHeightJs[i] + ")";
                view.loadUrl(js);
            }
        }
    };

    protected  T $(int id) {
        return (T) findViewById(id);
    }
}

结果如下：

可以告诉大家以上高度都不对。

2.通过getContentHeight()获取高度

思路是在网页加载完成以后通过WebView的getContentHeight(）方法获取高度代码如下：

 private WebViewClient mClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            Log.i("zzz", "webview contentHeight=" + view.getContentHeight());
        }
    };

运行结果

结论：高度不对

3.通过measure()进行测量

思路，在WebView加载网页完毕以后，通过webview.measure(0,0)进行测量，两个0表示对宽高无限制。

代码改动部分:


    private class Mobile {
        @JavascriptInterface
        public void onGetWebContentHeight() {
            //重新调整webview高度
            webView.post(() -> {
                webView.measure(0, 0);
                int measuredHeight = webView.getMeasuredHeight();
                Log.i("zzz", "measuredHeight=" + measuredHeight);
            });


        }
    }


    private WebViewClient mClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            mobile.onGetWebContentHeight();
        }
    };

运行结果

结论：大家可以看到这个高度是最高的，也的确是webView网页内容的高度。

总结

至此大家以后就知道怎么获取WebView内容高度了

问题二，如果监听网页高度变化

js获取屏幕高度_js获取屏幕高度_js获取电脑屏幕高度

这是第一次打开APP的时候，获取到网页高度，在重新设置webView的高度，和RecyclerView的高度

代码如下


    private class Mobile {
        @JavascriptInterface
        public void onGetWebContentHeight() {
            //重新调整webview高度
            webView.post(() -> {
                webView.measure(0, 0);
                int measuredHeight = webView.getMeasuredHeight();
                ViewGroup.LayoutParams layoutParams = webView.getLayoutParams();
                layoutParams.height = measuredHeight;
                webView.setLayoutParams(layoutParams);
                ViewGroup.LayoutParams layoutParams1 = recyclerView.getLayoutParams();
                layoutParams1.height = scrollView.getHeight();
                Log.i("zzz", "scrollView height=" + scrollView.getHeight());
                recyclerView.setLayoutParams(layoutParams1);
            });


        }
    }


    private WebViewClient mClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            mobile.onGetWebContentHeight();
        }
    };

效果如下：可以看到网页全部显示了，这已经滑动到网页的最底部。

但问题是点击阅读更多，网页中有几个隐藏的新闻被显示出来js获取屏幕高度，造成网页内容高度变化，但是我们检测不到网页内容高度变化，所以变成这样了。

js获取电脑屏幕高度_js获取屏幕高度_js获取屏幕高度

下面是我的解决思路。

js获取屏幕高度_js获取屏幕高度_js获取电脑屏幕高度

思路1.通过js监听内容变化

我通过设置window的resize监听来实现高度变化的监听。下面使用浏览器来测试：

结果点击阅读更多，没有触发相关的函数。只有调整window大学的时候才会

思路2.在WebView的onDraw方法中监听

经过我的实验在点击阅读更多以后webView的contentHeight会发生变化，于是我就扩展了WebView使其能监听内容高度变化

这是我的自定义WebView：

package com.trs.studyview.view;

import android.content.Context;
import android.graphics.Canvas;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.webkit.WebView;

/**
 * Created by zhuguohui on 2017/8/8.
 */

public class TRSWebView extends WebView {
    private int lastContentHeight = 0;
    private static final int MSG_CONTENT_CHANGE = 1;
    private onContentChangeListener onContentChangeListener = null;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case MSG_CONTENT_CHANGE:
                    if (onContentChangeListener != null) {
                        onContentChangeListener.onContentChange();
                    }
                    break;
            }
        }
    };


    public TRSWebView(Context context) {
        this(context, null);
    }

    public TRSWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getContentHeight() != lastContentHeight) {
            handler.sendEmptyMessage(MSG_CONTENT_CHANGE);
            lastContentHeight = getContentHeight();
            Log.i("www", "contentChange height=" + getContentHeight());
        }

    }

    public void setOnContentChangeListener(TRSWebView.onContentChangeListener onContentChangeListener) {
        this.onContentChangeListener = onContentChangeListener;
    }

    /**
     * 监听内容高度发生变化
     */
    public interface onContentChangeListener {
        void onContentChange();
    }
}

上一篇 sqlyog注册码-MySQL工具之 Navicat 破解安装
下一篇 视频播放插件-八款Final Cut ProX插件推荐！让视频美颜｜追踪｜调色超简单

相关文章