webview中Android和Js通讯互调并传参数

Js调用安卓方法

1、初始化WebView

 

WebSettings settings = mWebview.getSettings();
        settings.setJavaScriptEnabled(true);//打开js和安卓通信
        mWebview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        });

        mWebview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });

2、新建和js通信的类

 

 

public class JavaScriptMethods {
    private Context context;
    private WebView mWebView;
	private Handler mHandler = new Handler();
    public JavaScriptMethods(Context context, WebView webView) {
        this.context = context;
        this.mWebView = webView;
    }

    @JavascriptInterface //android4.2之后，如果不加上该注解，js无法调用android方法（安全）
    public void showToast(final String json) {
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(context, json, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3、

 

 

mWebview.addJavascriptInterface(new JavaScriptMethods(this, mWebview), "daibiaoqianmianlei");
mWebview.loadUrl("http://");//在线模板
//mWebview.loadUrl("file:///android_asset/html5/index.html");//本地模板

4、Js调用安卓方法

 

 

$("#callAndroid").click(function(){
        //调用安卓方法
//        window.安卓对象.安卓方法
        var json = {"message":"你好，我是js"};
        window.daibiaoqianmianlei.showToast(JSON.stringify(json));
    });

 

 

 

安卓调用Js

1、Js提供方法

 

function showMessage(json){
        var name = json.name;
        var city = json.city;

        alert(JSON.stringify(json));
        console.log("name="+name+",city="+city);
    }

2、安卓代码

 

 

	@Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                try {
                    //当页面加载完成后，调用js方法
//                mWebview.loadUrl("javascript:方法名(参数)");
                    JSONObject json = new JSONObject();
                    json.put("name", "安卓");
                    json.put("city", "上海");
                    mWebview.loadUrl("javascript:showMessage("+json.toString()+")");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }

个人博客更多精彩文章

demo链接