Android WebView实现原生与JS的交互

个人主页 Documents

在现在的Android开发中，为了追求开发的效率以及移植的便利性，越来越多的开发者会在App中使用WebView作为部分业务内容展示与交互的主要载体。那么在这种Hybrid(混合式) App中，难免就会遇到页面JS需要与Java相互调用，调用Java方法去做那部分网页JS不能完成的功能或者是通过Java来注入JS使网页去执行相关的操作。

实现步骤：

1、 自定义WebView

public class MyWebView extends WebView {

    private WebViewInterface mWebViewInterface;

    public MyWebView(Context context) {
        super(context);
        init();
    }

    public void setWebViewInterface(WebViewInterface baseWebViewInterface) {
        mWebViewInterface = baseWebViewInterface;
    }

    //回调方法接口
    public interface WebViewInterface {
        void showToast(String msg);

        void getTitle(String title);
    }

    public void init() {
        WebSettings ws = getSettings();
        setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        setHorizontalScrollBarEnabled(false);
        setVerticalScrollBarEnabled(false);
        ws.setJavaScriptEnabled(true);
        ws.setDomStorageEnabled(true);
        ws.setSupportZoom(true);
        ws.setBuiltInZoomControls(true);
        ws.setBuiltInZoomControls(false);
        ws.setJavaScriptCanOpenWindowsAutomatically(true);
        //注入带有Java方法的JS对象，名字可以自定义（js_obj）
        addJavascriptInterface(new InJavaScriptObj(), "js_obj");
        setWebViewClient(new MyWebViewClient());
        setWebChromeClient(new MyWebChromeClient());
    }

    final class InJavaScriptObj {
        //android 4.2 之后版本提供给js调用的函数必须带有注释语句@JavascriptInterface
        @JavascriptInterface
        public void showToast(String msg) {
            mWebViewInterface.showToast(msg);
        }
    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //加载网页url，此处可以根据url进行相应的处理
            return super.shouldOverrideUrlLoading(view, url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            //实现自己的逻辑
            super.onPageFinished(view, url);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            //实现自己的逻辑
        }

        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            //错误处理
            super.onReceivedError(view, request, error);
        }

        @Override
        public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
            //http错误处理
            super.onReceivedHttpError(view, request, errorResponse);
        }
    }

    private class MyWebChromeClient extends WebChromeClient {

        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            //这个方法是收到网页的title的时候会调用的，这里我们可以拿到网页的title显示处理
            mWebViewInterface.getTitle(title);
        }

        @Override
        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
            // 在这里你可以拦截网页的Alert来实现自己的逻辑，return true停止事件的继续传播，也可以使用默认实现
            return super.onJsAlert(view, url, message, result);
        }

        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            // 在这里你可以实现拦截网页的Confirm来实现自己的逻辑，return true停止事件的继续传播，也可以使用默认实现
            return super.onJsConfirm(view, url, message, result);
        }

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            //在这里你可以进度的变化实现自己的逻辑
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }
    }
}

2、使用自定义WebView来实现功能

布局文件：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical">  
6.   
7.     <RelativeLayout  
8.         android:id="@+id/rl_top"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:padding="10dp"  
12.         android:background="#7DD13F"  
13.         android:minHeight="?attr/actionBarSize">  
14.   
15.         <ImageView  
16.             android:id="@+id/iv_back"  
17.             android:layout_width="wrap_content"  
18.             android:layout_height="wrap_content"  
19.             android:layout_centerVertical="true"  
20.             android:gravity="center"  
21.             android:paddingBottom="12dp"  
22.             android:paddingRight="12dp"  
23.             android:paddingTop="12dp"  
24.             android:src="@mipmap/icon_back" />  
25.   
26.         <TextView  
27.             android:id="@+id/tv_title"  
28.             android:layout_width="wrap_content"  
29.             android:layout_height="wrap_content"  
30.             android:layout_centerInParent="true"  
31.             android:ellipsize="end"  
32.             android:gravity="center"  
33.             android:maxEms="8"  
34.             android:textColor="#AF0000"  
35.             android:singleLine="true"  
36.             android:textSize="20sp" />  
37.   
38.         <TextView  
39.             android:id="@+id/tv_menu"  
40.             android:layout_width="wrap_content"  
41.             android:layout_height="wrap_content"  
42.             android:layout_alignParentRight="true"  
43.             android:layout_centerVertical="true"  
44.             android:gravity="center_vertical|right"  
45.             android:text="网页弹窗"  
46.             android:textSize="20sp"/>  
47.     </RelativeLayout>  
48.   
49.     <LinearLayout  
50.         android:id="@+id/ll_webview"  
51.         android:layout_width="match_parent"  
52.         android:layout_height="match_parent"  
53.         android:layout_below="@+id/rl_top"  
54.         android:orientation="vertical">  
55.   
56.     </LinearLayout>  
57.   
58. </RelativeLayout>  

activity：

public class WebViewActivity extends AppCompatActivity implements MyWebView.WebViewInterface, View.OnClickListener {

    private LinearLayout    mWebViewLl;
    private MyWebView       mWebView;
    private ImageView       mBackIv;
    private TextView        mTitleTv;
    private TextView        mMenuTv;

    private String          url;

    private static final int SET_TITLE = 0x101;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == SET_TITLE) {
                setMyTitle((String) msg.obj);
            }
        }
    };

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

    private void initView() {
        url = getIntent().getStringExtra("url");
        mMenuTv     = (TextView) findViewById(R.id.tv_menu);
        mBackIv     = (ImageView) findViewById(R.id.iv_back);
        mWebViewLl  = (LinearLayout) findViewById(R.id.ll_webview);
        mTitleTv    = (TextView) findViewById(R.id.tv_title);
        mMenuTv.setOnClickListener(this);
        mBackIv.setOnClickListener(this);
        mWebView    = new MyWebView(this);
        mWebViewLl.addView(mWebView);
        mWebView.setWebViewInterface(this);
        mWebView.loadUrl(url);
    }


    //回调方法的实现
    @Override
    public void showToast(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }

    //回调方法的实现
    @Override
    public void getTitle(String title) {
        Message message = new Message();
        message.what = SET_TITLE;
        message.obj = title;
        mHandler.sendMessage(message);
    }

    private void setMyTitle(String title) {
        mTitleTv.setText(title);
    }

    @Override
    public void onBackPressed() {
        back();
    }

    private void back() {
        if (mWebView.canGoBack()) {
            mWebView.goBack();
        } else {
            this.finish();
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.iv_back:
                back();
                break;
            case R.id.tv_menu:
                //注入JS代码,Java调用JS
                mWebView.loadUrl("javascript:alert('网页弹窗alert');");
                break;
        }
    }
}

网页代码：

<head>
    <title>测试</title>
    <style>
        a{
            color:green;
            font-weight:900;
            font-size:80px;
            height:400;
            width:500;
        }

        button{
            color:green;
            font-size:50px;
            height:300;
            width:400;
        }
    </style>
    <script>
        //JS调用Java方法，js_obj为网页中带有Java方法的对象，可以自定义但是要和注入的名字一样
        function myFunction() {
            js_obj.showToast("显示Toast");
        }
    </script>
</head>
<br>

<a href="file:///android_asset/test_1.html"> 链 接 </a> </br>
<button οnclick="myFunction()" >显示Toast</button>
</body>
</html>

效果：

源代码：https://github.com/cokernut/CustomWebView