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();
    }

}
程序运行时的界面如下:

Android WebView中javascript和java的互相调用_第1张图片


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

Android WebView中javascript和java的互相调用_第2张图片

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

Android WebView中javascript和java的互相调用_第3张图片

你可能感兴趣的:(JavaScript,js,android,webView,调用)