WebView你可能不知道的细节

WebSettings设置

//设置是否支持缩放，我这里为false，默认为true。mWebView.getSettings().setSupportZoom(false);//设置是否显示缩放工具，默认为falsemWebView.getSettings().setBuiltInZoomControls(false);//设置默认的字体大小，默认为16，有效值区间在1-72之间mWebView.getSettings().setDefaultFontSize(18);//首先阻塞图片，让图片不显示mWebSettings.setBlockNetworkImage(true);//页面加载好以后，在放开图片mWebSettings.setBlockNetworkImage(false);//设置自适应屏幕webSettings.setUseWideViewPort(true); // 缩放至屏幕的大小webSettings.setLoadWithOverviewMode(true); //支持插件webSettings.setPluginsEnabled(true); //提高渲染等级mWebSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);//禁止webview上面控件获取焦点(黄色边框)mWebSettings.setNeedInitialFocus(false);//关闭webview中缓存 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //设置可以访问文件 webSettings.setAllowFileAccess(true); //支持通过JS打开新窗口 webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//支持自动加载图片 webSettings.setLoadsImagesAutomatically(true); //设置编码格式webSettings.setDefaultTextEncodingName("utf-8");

webview加载方式

加载asset中html文件

webview.loadUrl("file:///android_asset/index.html");

加载网络url

webview.loadUrl("http://www.baidu.com");

加载手机本地html文件

webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

加载带参数的post接口

String postDate = "name=zhangsan&age=18&sex=1";webView.postUrl("www.test.com",EncodingUtils.getBytes(postDate,"BASE64"));

加载html字符串

//不支持#、%、\、? 四种字符webView.loadData(URLEncoder.encode(data, encoding),"text/html", "utf-8");  webView.loadDataWithBaseURL("about:blank", html, "text/html", "utf-8", null);

Back键控制网页后退

public boolean onKeyDown(int keyCode, KeyEvent event) {  if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) {       mWebView.goBack();      return true;  }  return super.onKeyDown(keyCode, event);}

是否调用外部浏览器

webview.setWebViewClient(new WebViewClient() {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        view.loadUrl(url);        return true;    }});

当设置WebViewClient时，不会跳转到外部浏览器，否则会跳转到外部浏览器

Webview内存泄漏问题

通常我们声明一个webview是使用xml布局实现的

<WebView    android:id="@+id/webview"    android:layout_width="match_parent"    android:layout_height="match_parent"／>

然而使用这种方式,加载webview的Activity得不到销毁，即使使用以下代码也没用任何效果

@Overrideprotected void onDestroy() {    super.onDestroy();    webview.destroy();    webview=null;}

为了验证加载webview的Activity一直被持有，可以通过Android Studio来查看
点击Android Monitor,然后选择Monitors，点击下图圆圈部分

image

然后会生成一个.hprof文件，进入到Activity目录下面

image

你会发现没进入一次，WenviewActivity的total cout和heap cout会增加一次。

解决使用webview造成的内存泄漏问题，我们通常不使用xml布局文件声明webview，而是动态生成webview。

首先是在xml文件中的webview位置生明一个LinearLayout

<LinearLayout    android:id="@+id/webview"    android:layout_width="match_parent"    android:layout_height="match_parent"／>

然后只onCreate方法动态生明一个webview,把webview添加到LinearLayout中

webView=new WebView(getApplicationgContext());linearLayout.addView(webview);

最后中onDestroy()移除LinearLayout所有子试图

 @Overrideprotected void onDestroy() {    super.onDestroy();    webView.removeAllViews()    webview.destroy();    webview=null;}

javascript互调

原生与H5互相调用情况之一是javascript互调。

不管是H5调用原生还是原生调用H5，首先我们都需要设置webview支持javascript，所以我们必须加上下面这行代码

WebView.getSettings().setJavaScriptEnabled(true);

有了javascript支持，你就可以尽情的去相互调用了。

我们通过一个实际示例来分析一下

有这么一个需求，Html页面上长按语音录制按钮调用手机原生语音录制功能，然后对语音进行识别，把识别后的String传递个Html。在这个需求中，就涉及到Html调用原生语音录制以及原生调用Htmljavascript方法将识别后的语音通过字符串传给Html。

首先我们实现长按Html按钮调用本地语音录制，这就是Html调用原生方法了，这里的方法是本地创建的js方法

private class AshJavaScriptInterface{    public AshJavaScriptInterface(BaseActivity context) {        super(context);    }    @android.webkit.JavascriptInterface    public void onTouchDown() {        //TODO 按钮被按下，类似于原生按下操作    }    @android.webkit.JavascriptInterface    public void onTouchUp() {        //TODO 按钮被松开，类似于原生松开操作    }}

将创建的Js方法设置到webview中

public AshJavaScriptInterface createJsInterface() {    return new AshJavaScriptInterface(this);}webView.addJavascriptInterface(jsExec,GlobalVariable.JS_INTERFACE_OBJ;

然后剩余的工作就是Html前端的工作了，前端监听按钮事件，当按钮被按下时调用onTouchDown方法（比如QBaoJSBridge.onTouchDown()），而客户端就在onTouchDown方法中处理按钮被按下后的操作，当手松开之后，前端调用onTouchUp方法（比如QBaoJSBridge.onTouchUp()），客户端同时在onTouchUp方法中处理手被松开的操作。到这里，按钮长按监听就完成了，这里主要是Html调用原声Js方法。

语音录制之后，客户端需要对录制的语音进行识别，将语音转换成String字符串（我们这里是使用百度语音识别），识别过程是一个异步耗时的操作，当我们完成识别之后需要把字符串传递给Html，那么我们就需要调用Html的js方法了

webView.loadUrl("javascript:sendMsgByApp(\"" + msg + "\")");

sendMsgByApp方法就是前端定义的一个Js方法，做完这一步，这个需求整个流程就结束了，整个过程中实现了Html和原生的js相互调用

除了以上场景，比如Html要获取手机设备号，点击Html按钮弹出对话框等都可以通过调用本地方法实现

html链接处理

我们常常会遇到点击Html按钮跳转到原生指定的Activity页面或者获取url链接中的参数进行本地接口调用等情况

那么我们就需要对url链接进行处理，通过判断url进行不同需求操作

具体如何实现的呢？

首先要设置webview的WebViewClient，当我们点击html按钮或者链接时会调用shouldOverrideUrlLoading方法，所以我们对点击进行操作时通常也是在shouldOverrideUrlLoading方法中进行处理

 webview.setWebViewClient(new WebViewClient(){    @Override    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){        boolean isHandle = handleProtocol(url);        if (isHandle){        return true;    }        return super.shouldOverrideUrlLoading(view, request);    }});

handleProtocol就是url处理方法

protected boolean handleQianBaoProtocol(String url) {    Uri uri = Uri.parse(url);    String scheme = uri.getScheme();    String host = uri.getHost();    String path = uri.getPath();    if ("https".equals(uri.getScheme())                && "maliprod.alipay.com".equals(uri.getHost())                && "/w/trade_pay.do".equals(uri.getPath())) {        String orderIds = uri.getQueryParameter("pay_order_id");        if (!TextUtils.isEmpty(orderIds)) {            //提交商品订单        }    }     if ("newtab".equals(uri.getScheme())            && "goodstuff.qbao.com".equals(uri.getHost())            && "/similar".equals(uri.getPath())) {        String pid = uri.getQueryParameter("pid");        FindLikeActivity.startActivity(this, pid);        return true;    }return false;}

webview长按监听

长按主要是针对图片、链接、电话、email等等，所以监听长按，我们可以进行图片打开、调用手机邮箱、打电话、分享等操作

监听代码如下

webview.setOnLongClickListener(new View.OnLongClickListener() {    @Override    public boolean onLongClick(View v) {        WebView.HitTestResult result = ((WebView) v).getHitTestResult();        if (null == result) return true;        int type = result.getType();        if (type == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE ||                type == WebView.HitTestResult.IMAGE_TYPE) {            String imgUrl = result.getExtra();            if (!TextUtils.isEmpty(imgUrl)) {                onImgLongClick(imgUrl);                return true;            }        }        return true;    }});

以上代码主要长按打开图片，其他的具体操作可以通过查看HitTestResult类，里面有不同类型的常量，通过判断type来进行我们具体的操作

设置html加载进度

加载网络url一般都是耗时操作，而且当网络环境比较差的时候，加载花费的时间可能更长，为了比较好的体验，我们通常会给一个加载进度。

class MyWebChrimeClien extends WebChromeClient {    @Override    public void onProgressChanged(WebView view, int newProgress) {        if (newProgress == 100) {            mProgress.setVisibility(View.GONE);        } else {            if (View.INVISIBLE == mProgress.getVisibility()) {                mProgress.setVisibility(View.VISIBLE);            }            mProgress.setProgress(newProgress);        }        super.onProgressChanged(view, newProgress);    }}mWebView.setWebChromeClient(new MyWebChrimeClien());

主要是通过设置WebChromeClient，通过newProgress的数字判断加载到什么位置，这个进度是包含百分比的，如果不需要知道具体百分比，可以通过设置WebViewClient,
重写onPageStarted方法和onPageFinished方法

class MyWebViewClient extends WebViewClient {    public boolean shouldOverrideUrlLoading(WebView view, String url) {        view.loadUrl(url);        return true;    }    public void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);        mProgress.setVisibility(View.VISIBLE);    }    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        mProgress.setVisibility(View.GONE);    }}mWebView.setWebViewClient(new MyWebViewClient());

具体使用哪种方式，那就看你实际需求了，而且进度条也可以根据自己的需求进行自定义