您的位置：首页 > 移动开发 > Android开发

(js)JavaScript调用本地android的方法

2016-12-19 17:15 429 查看

之前由于公司的一个需求：通过web网页的点击事件必须传值给android本地并且跳转到指定的页面，当时js这块我不了解，就和前端工程师研究讨论最终是做出来了，现在看来挺简单的，回顾做个记录~！

首先初始化我们的WebView，上代码：

mWeb = (WebView) findViewById(R.id.webview);

WebSettings settings = mWeb.getSettings();
// settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setJavaScriptEnabled(true);
// settings.setSupportZoom(true);
// settings.setBuiltInZoomControls(true);
// settings.setUseWideViewPort(true);
// settings.setLoadWithOverviewMode(true);
settings.setAppCacheEnabled(true);
settings.setDomStorageEnabled(true);
mWeb.setWebViewClient(new WebViewClient());
mWeb.setWebChromeClient(new WebChromeClient());与WebView交互需要传入一个对象，以及这个对象的标记：
mWeb.addJavascriptInterface(new JavaScriptKit(this), "android");JavaScriptKit就是需要传给js进行交互的对象，他的代码很简单，android 是我们对这个对象的标记，可以理解为是供js进行调用的一个引用名！
/**
* Created by chensd on 2016/12/19.
*/
public class JavaScriptKit {
private Context context;

public JavaScriptKit(Context context) {
this.context = context;
}

@JavascriptInterface
public void showToast(String text){
Toast.makeText(context, text, Toast.LENGTH_LONG).show();
}
}这里需要注意一点，为了兼容高版本，我们需要在方法处加入@JavascriptInterface
之后调用如下load方法，加载本地静态网页：

mWeb.loadUrl("file:///android_asset/phone.html");Html的内容比较简单，就是一个按钮，调用js的函数，通过“android”的这个标记，从而调用本地的方法！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
.main{width: 20%; margin: 200px auto;}
</style>
</head>
<body>
<script type="text/javascript">
function showToast(){
android.showToast("来自javaScript!!");
}
</script>

<div class="main">
<form>
<input type="button" value="这是web的按钮" onclick="showToast()">
</form>
</div>
</body>
</htm
4000
l>

记得把html文件放在assets目录下，好了这样的简单交互就搞定了，demo地址如下： https://github.com/chenshandong/JavaScriptAndroidDemo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航