android webview自动高度_Android如何获取WebView内容高度

作者: zhuguohui 地址： https://www.jianshu.com/p/ad22b2649fba

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

效果

1 . 分页加载

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

##实现使用的ScrollView包裹一层LinearLayout，LinearLayout中依次防止WebView和RecyclerView。布局如下：

<?xml version="1.0" encoding="utf-8"?>
<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">

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

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

<android.support.v7.widget.RecyclerViewandroid: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内容高度了

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

这是第一次打开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();
        }
    };

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

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

下面是我的解决思路。

思路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();
    }
}

点击多次阅读更多

结论：可以监听网页内容的变化

问题三 recyclerView的滑动冲突。

我是通过自定义ScrollView来实现的，具体代码如下，测试可用

package com.trs.studyview.view;

import android.content.Context;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

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

public class TRSScrollView extends ScrollView {
    RecyclerView recyclerView;

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

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


public void setRecyclerView(RecyclerView recyclerView) {
this.recyclerView = recyclerView;
    }

int downY;
int moveY = 0;
    MotionEvent downEvent;

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//如果RecyclerView
if (recyclerView != null) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
                    downEvent = ev;
                    downY = (int) ev.getX();
                    moveY = 0;
break;
case MotionEvent.ACTION_MOVE:
int moveY = (int) ev.getY() - downY;
if (Math.abs(moveY) > 20) {
//表示滑动
if (moveY > 0) {
//向下滑动,如果recyclerView还没有显示则拦截事件
if (getScrollY() < recyclerView.getTop()) {
return true;
                            }
                        } else {
//向上滑动
if (getScrollY() == recyclerView.getTop()) {
//如果第一个item已经显现才拦截事件
                                LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
if (layoutManager.findFirstVisibleItemPosition() == 0) {
return true;
                                }
                            }
                        }
                    }
break;
            }
        }

return super.onInterceptTouchEvent(ev);
    }
}

最终运行代码

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.view.ViewGroup;
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.setOnContentChangeListener(() -> {
            mobile.onGetWebContentHeight();
        });
        webView.loadUrl(url);
        adapter = new CommentAdapter();
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        scrollView.setRecyclerView(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) {
        }
    };

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