WebView中Java与JavaScript的交互

移动开发作者： 2024-08-22 10:25:01

原文首发于微信公众号：jzman blog，欢迎关注交流！ Android 开发过程中 WebView 的使用比较广泛，常用来加载网页，比如使用 WebView 加载新闻页面、使用 WebView 打

关键方法
具体实现
显示效果

关键方法

1. setJavaScriptEnabled()

public abstract void setJavaScriptEnabled(boolean flag);

2. addJavascriptInterface()

public void addJavascriptInterface(Object object,String name) {}

具体实现

WebView 设置支持 JavaScript 脚本；
创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法；
加载 WebView 中要显示的内容；
使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中；
在 JavaScript 中调用映射对象的方法，打开显示图片的 Activity;
调用 javaScript 中的方法。

第一步：

//设置支持JavaScript
webSettings.setJavaScriptEnabled(true);

第二步：

/**
 * 与 javascript 通信的 Java 对象，提供 javascript 调用的方法
 * Created by jzman on 2017/7/20 0020.
 */
public class AndroidInterface {
    private Context context;
    public AndroidInterface(Context context) {
        this.context = context;
    }

    /**
     * 添加注解 @JavascriptInterface
     * javascript 要调用的方法
     */
    @JavascriptInterface
    public void showImage(String imgUrl){
        Intent intent = new Intent();
        intent.putExtra("img",imgUrl);
        intent.setClass(context,ImageActivity.class);
        context.startActivity(intent);
    }
}

第三步：

//加载 assets 目录下的 HTML 文件
webView.loadUrl("file:///android_asset/index.html");

第四步：

//注入Java对象并映射到JavaScript中
//参数(与JaveScript通信的对象，映射到JavaScript中的对象)
webView.addJavascriptInterface(new AndroidInterface(this),"imageListener");

第五步：

<script type="text/javascript">
	function findImg(){
		//查找img标签
		var imgs = document.getElementsByTagName("img");
		//遍历img标签
		for(var i=0; i<imgs.length; i++){
			//为每一个标签设置点击事件
			imgs[i].onclick = function(){
			 //imageListener映射的Java对象
			window.imageListener.showImage(this.src);
			}
		}
	}
</script>

第六步：

//设置 WebViewClient 监听相关事件
webView.setWebViewClient(new WebViewClient(){
    //页面加载完成回调该方法
    @Override
    public void onPageFinished(WebView view,String url) {
        super.onPageFinished(view,url);
        //保证页面加载完成后Java对象注入到JavaScript中
        webView.loadUrl("javascript:findImg()");
    }
});