WebView和HTML中的JS交互

第一步：

package com.yqy.myresume.activity.share;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;


import com.yqy.myresume.R;
import com.yqy.myresume.interfacepackage.JsCallJavaInterface;

public class ShareWebviewActivity extends Activity {

    private WebView mWebView;

     private JsCallJavaInterface jsCallJavaMethod;
    private Button bt_without_param;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_share_webview);
        mWebView = (WebView) findViewById(R.id.webview);
        bt_without_param = (Button) findViewById(R.id.bt_without_param);
        setWebView();
        bt_without_param.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:jscallbynative()");// 无参数调用js方法
                String str_native_input = "壮少太帅了";
                mWebView.loadUrl("javascript:jscallbynativewithparam('" + str_native_input + "'+" + "'  android原生传递参数给js 并调用了js的打印方法'" + ")");

            }
        });
    }

    @SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface"})
    private void setWebView() {

        // JavaScript使能（如果加载的页面中有JS代码，则必须使能JS）
        WebSettings webSettings = mWebView.getSettings();
        // 启用javascript
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setBuiltInZoomControls(true);

        // 在WebView中打开连接（默认行为是使用浏览器，设置此项后都用WebView打开）
        mWebView.setWebViewClient(new WebViewClient());

        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/index.html");

        //JS调用Android方法
        jsCallJavaMethod = new JsCallJavaInterface() {

            @Override
            @JavascriptInterface
            public void javaFunction() {// js 调用（无参）Android原生接口中方法
                runOnUiThread(new Runnable() {

                    @Override
                    public void run() {
                        bt_without_param.setText("你有病啊");
                    }
                });

            }

            @JavascriptInterface
            public void javaFunction(final String str) {// js 调用（有参）Android原生接口中方法
                runOnUiThread(new Runnable() {

                    @Override
                    public void run() {
                        bt_without_param.setText(str);
                    }
                });
            }

        };
        mWebView.addJavascriptInterface(jsCallJavaMethod, "InterfaceTest");//InterfaceTest可以在js'里调用安卓里的jsCallJavaMethod对象的方法
        mWebView.addJavascriptInterface(this, "MyTest");//传递了该类的实例对象给，以便于html中可以对象.方法的调用

        //android原生传递参数给js 并调用了js无参和有参方法
        /*mWebView.loadUrl("javascript:jscallbynative()");// 无参数调用js方法
        String str_native_input = "壮少太帅了";
        mWebView.loadUrl("javascript:jscallbynativewithparam('" + str_native_input + "'+" + "'  android原生传递参数给js 并调用了js的打印方法'" + ")");
*/
    }


}

接口方法：

package com.yqy.myresume.interfacepackage;

import android.webkit.JavascriptInterface;

/**
 * Created by zhuang on 2016/7/12.
 */
public interface JsCallJavaInterface {
    /**
     * 用于js调用的java方法（无参）
     * Android4.2以上版本一定要在方法前加上@JavascriptInterface
     */
    @JavascriptInterface
    public void javaFunction();//JS调用android无参


    /**
     * 用于js调用的java方法（有参）
     * Android4.2以上版本一定要在方法前加上@JavascriptInterface
     */
    @JavascriptInterface
    public void javaFunction(String str);//JS调用android有参
}

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />
    <Button
        android:id="@+id/bt_without_param"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:textSize="15sp"
        android:text="android原生调用 js的方法（无参）" />

</LinearLayout>

HTML文件：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
//js被原生调用
function jscallbynative(){
document.getElementById("content").innerHTML +=   
         "<br\>Android原生调用了js的打印方法（无参）";
}

//js被原生调用
function jscallbynativewithparam(arg){
document.getElementById("content").innerHTML +=   
         ("<br\>"+arg);
}

function gethtmlinput(){
var str="";
str=document.getElementById("html_input").value;
//document.getElementById("content").innerHTML +=   "<br\>"+str;
return str;
}

</script>
</head>
<body >
webview:<br/>
<Input style="font-size: 20px"   type="button" onClick="window.InterfaceTest.javaFunction()" value="html中调用Android原生方法（无参）"/><br/>
<Input style="font-size: 20px"   type="button"  onClick='window.InterfaceTest.javaFunction("html输入框信息:"+gethtmlinput())' value="html中调用Android原生方法 并传递参数"/><br/>
<input style="font-size: 20px"   type="text" name="html_input" id="html_input"  />

<br/>
<div id="content" >JS调用Android原生方法：</div>
</body>
</html> 

Js里调用android的方法是这样的：
注意：onClick=’window.InterfaceTest.javaFunction（）
InterfaceTest这是android里设置的变量，javaFunction是接口的方法

mWebView.addJavascriptInterface(jsCallJavaMethod, "InterfaceTest");//InterfaceTest可以在js'里调用安卓里的jsCallJavaMethod对象的方法

android调用js的方法：

    mWebView.loadUrl("javascript:jscallbynative()");
        //jscallbynative()是JS里的方法