Android WebView中javascript和java的互相调用

在Android的WebView中我们可以实现Java代码和javascript代码的互相调用，下面用一个demo说明：

1、首先是布局文件，比较简单，上面一个Button，下面一个WebView，这个就不上xml代码了

2、然后是html文件，这里测试用的是写好的html文件，放在Android工程的assets目录下，命名为test.html，其内容为：

<script language='javascript'>

<!-- 该方法是被Java代码调用的 -->
function test(){
	alert('my name is yubo');
}

<!-- 该方法最后将调用Java代码中的showToast()方法 -->
function btnclick(){
	client.showToast();
}

</script>

<!-- html显示文本 -->
hello, world!

<br/>

<!-- html显示按钮 -->
<input type="button" value="show toast" onclick="btnclick()"/>

在Activity中，主要代码如下：

package com.example.testjs;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
	private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        webView = (WebView) findViewById(R.id.webview);
        //设置WebView支持javascript
        webView.getSettings().setJavaScriptEnabled(true);
        //让WebView加载本地html文件
        webView.loadUrl("file:///android_asset/test.html");
        webView.setWebChromeClient(new WebChromeClient());
        //设置WebView的js接口，通过此处的设置，让js可以调用Java代码
        webView.addJavascriptInterface(this, "client");
    }
    
    //这是Activity中显示的按钮的点击事件，测试通过Java调用js方法
    public void btnClick(View view){
    	webView.loadUrl("javascript:test()");
    }
    
    //这是将会被js调用的Java方法，当html文件中的按钮被点击时执行该方法
    public void showToast(){
    	Toast.makeText(this, "this function is called by js", Toast.LENGTH_SHORT).show();
    }

}

程序运行时的界面如下：



当点击页面上方的show alert按钮时，会调用js中的方法，执行结果如下图：



当点击WebView中的show toast按钮时，将会通过js代码调用Activity中的showToast()方法，显示一个Toast，执行结果如下图：