WebView 使用简介

WebView 使用简介

一 WebView 相关的类

1. WebView

用来显示网页，使用必须时刻注意我们需要添加网络权限

<uses-permission android:name="android.permission.INTERNET"/>

加载网页:

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

加载本地网页， 网页放在 assets/html 目录下,

mWebView.loadUrl("file:///android_asset/html/hello.html");

2. WebSettings

对WebView进行配置和管理. WebView 在生成的时候默认生成WebSettings，通过 mWebView.getSettings 获取WebSettings。
如果WebView 销毁，这时候调用WebSettings 方法会出错。

WebSettings webSettings = mWebView.getSettings();

// 允许javascript 调用
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// WebView 默认视频播放必须由用户的手势触发，设置为false 可以在js中 设置进入网页立即播放视频
webSettings.setMediaPlaybackRequiresUserGesture(false);

3. WebViewClient

WebViewClient 处理WebView 各种通知 & 请求事件
直接通过WebView loadUrl 会跳转到手机的浏览器, 如果需要WebView 本身显示网页，需要在WebViewClient 的
shouldOverrideUrlLoading 中拦截。

mWebView.setWebViewClient(new NmWebViewClient ());

private class NmWebViewClient extends WebViewClient {
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

WebViewClient 的一些回调函数

1. onPageStarted
2. onPageFinished
3. onLoadResource
4. onReceivedError
5. shouldOverrideUrlLoading

4. WebChromeClient

WebChromeClient 处理一些和Js 相关的回调

mWebView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.e("onConsoleMessage", consoleMessage.message());
        return super.onConsoleMessage(consoleMessage);
    }
});

WebChromeClient 的一些主要回调方法

1. onProgressChanged
2. onConsoleMessage
3. onReceivedTitle
4. onJsAlert
5. onJsConfirm
6. onJsPrompt
7. onJsTimeout

二 Android JS 相互调用

1. Android调用JS代码的方法有2种：

1. 通过WebView的loadUrl（） 这种方式没有返回值，需要Js 主动通知。
2. 通过WebView的 public void evaluateJavascript(String script, ValueCallback resultCallback)， 有返回值，但是只能在4.4 版本以上使用

调用Js的代码 script 格式为： javascript:function(‘args’)

@OnClick(R.id.iv_call_js)
    void onAndroidCallJsClick(){

        mWebView.post(new Runnable() {
            @Override
            public void run() {
                mWebView.loadUrl("javascript:javaCallJsWith('JavascriptInterface Javascript')");
            }
        });
    }

    @OnClick(R.id.iv_evaluate)
    void onAndroidCallJsParamClick(){

        mWebView.evaluateJavascript("javascript:javaCallJsEvaluate('Evaluate Javascript')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(WebViewActivity.this, value, Toast.LENGTH_LONG).show();
            }
        });
    }

2. 对于JS调用Android代码的方法有3种：

1. 通过WebView的addJavascriptInterface（）进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

//对应js中的test 对象
mWebView.addJavascriptInterface(WebViewActivity.this, "test"); 

@JavascriptInterface
public void hello( ){
    Log.e("WebView","hello");
    Toast.makeText(this, "Js Call android", Toast.LENGTH_LONG).show();
}

@JavascriptInterface
public void hello(String msg){
    Log.e("WebView","hello");
    Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
}
    
// WebViewClient 拦截URL
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    Uri uri = Uri.parse(url);
    if ( uri.getScheme().equals("js")) {
        Toast.makeText(WebViewActivity.this, url, Toast.LENGTH_LONG).show();
    } else {
        view.loadUrl(url);
    }
    
    return true;
}

// WebChromeClient 拦截
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
    AlertDialog.Builder b = new AlertDialog.Builder(WebViewActivity.this);
    b.setTitle("Alert");
    b.setMessage(message);
    b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            result.confirm();
        }
    });

    b.setCancelable(false);
    b.create().show();

    return true;
}

网页 hello.html 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>louie.wang</title>

    <script type="text/javascript">

        function javaCallJsWith(arg){
            document.getElementById("content").innerHTML = (arg);
        }

        function javaCallJsEvaluate(arg){
            document.getElementById("content").innerHTML = (arg);

            return "Return Result Very Good!!!"
        }
    </script>

    <script>
         function callAndroid(){
            test.hello();
         }

         function callAndroidWith(){
            test.hello("js带参数调用android中的代码");
         }

         function callAndroidByUrl(){
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }

         function clickPrompt(){
             var result = prompt("js://demo?arg1=111&arg2=222");
             alert("demo " + result);
       }
    </script>
</head>

<body>
    <h1>It works!</h1>
    <br/>
    <button type="button" id="button1" onclick="callAndroid()">js调用android中的代码</button>
    <br/>
    <button type="button" id="button2" onclick="callAndroidWith()">js带参数调用android中的代码</button>
    <br/>
    <button type="button" id="button3" onclick="callAndroidByUrl()">js通过URL调用Android代码</button>
    <br/>
    <button type="button" id="button4" onclick="clickPrompt()">js通过onJsAlert调用Android代码</button>
    <br/>

    <h1><div id="content">Hello World</div></h1>
</body>
</html>

三 WebView Debug

在 Android 4.4 (KitKat) 或更高版本中，使用 DevTools 可以在原生 Android 应用中调试 WebView 内容。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
        mWebView.setWebContentsDebuggingEnabled(true);
    }
}

Chrome 调试 WebView

WebChromeClient 的onConsoleMessage 回调函数 可以打印出 Js 的Consol.log

mWebView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.e("onConsoleMessage", consoleMessage.message());
        return super.onConsoleMessage(consoleMessage);
    }
});

WebView 内存泄漏

WebView 在Android 一些版本上存在内存泄漏。在8.0 版本测试没有发现这个问题。
可以参考下面的一些文章。

1. http://leehong2005.com/2016/08/19/webview-memory-leak/
2. http://linghaolu.github.io/webview/memory/leak/2015/07/16/android-5.1-webview-memory-leak.html
3. https://dev.qq.com/topic/59267f94eb3f11cc2e12f503

参考

1. http://blog.csdn.net/leejizhou/article/details/50894531/
2. http://www.jianshu.com/p/3c94ae673e2a
3. http://www.jianshu.com/p/345f4d8a5cfa