Android中webview里js和java的相互调用--含代码demo解析

编程小石头

于 2015-12-04 09:35:21 发布

阅读量1.9k

点赞数

分类专栏： Android知识点文章标签： android html5 webview javascript Android内置浏览器

本文链接：https://blog.csdn.net/qiushi_1990/article/details/50170417

版权

Android知识点专栏收录该内容

34 篇文章 2 订阅

订阅专栏

最近工作中需要在html5页面中进行点赞和收藏，并且还需要在点赞和收藏的同时把用户token传到服务器，所以没有办法只能用js和java交互了，

在网上找了好久，都是一些简单的例子，可操作性不强。自己就在这里总结了一下。用来给大家分享，也方便自己以后复用。文章底部用demo下载地址。

webview中js和java相互调用的实例代码

下面是个demo步骤
一，首先创建一个activity
public class Js2JavaActivity extends Activity {
private Button btn_show,btn_hide;
private WebView wv;
private JsInterface JSInterface2 = new JsInterface();
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

btn_show = (Button)findViewById(R.id.btn_java2js_show);
btn_hide = (Button)findViewById(R.id.btn_java2js_hide);
wv = (WebView)findViewById(R.id.wv_js2java);

wv.getSettings().setJavaScriptEnabled(true);
wv.addJavascriptInterface(JSInterface2,"JSInterface2");
wv.setWebViewClient(new webviewClient());

wv.loadUrl("file:///android_asset/test.html");
}

class webviewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
btn_show.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getBaseContext(), "内容显示了", Toast.LENGTH_LONG).show();
wv.loadUrl(String.format("javascript:java2js(0)"));//这里是java端调用webview的JS
}
});
btn_hide.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getBaseContext(), "内容隐藏了", Toast.LENGTH_LONG).show();
wv.loadUrl(String.format("javascript:java2js(1)"));//这里是java端调用webview的JS
}
});

JSInterface2.setWvClientClickListener(new webviewClick());//这里就是js调用java端的具体实现
}
}

class webviewClick implements JsInterface.wvClientClickListener {

@Override
public void wvHasClickEnvent() {
// TODO Auto-generated method stub
Toast.makeText(getBaseContext(), "js调用了本地java方法", Toast.LENGTH_LONG).show();
}

}
}

二，定义要调用的java类和java方法（这里最好单独定义一个类）
public class JsInterface {
/*interface for javascript to invokes*/
public interface wvClientClickListener {
public void wvHasClickEnvent();
}

private wvClientClickListener wvEnventPro = null;
public void setWvClientClickListener(wvClientClickListener listener) {
wvEnventPro = listener;
}

@JavascriptInterface //这个注解很重要
public void javaFunction() {
if(wvEnventPro != null)
wvEnventPro.wvHasClickEnvent();
}
}

三，把下面的html文件复制到一个文本text中。然后把文件名改为test.html
<html>
<body>
<script language="javascript">
function java2js(isHide) {
var x = document.getElementById('div');
if(isHide==0)
x.className = "";
else
x.className = "hide";
}

function js2java() {
JSInterface2.javaFunction();
}

</script>
<style type="text/css">
.hide {
display:none;
}
</style>

<a href="#" onClick="js2java()">点击调用java方法</a>

<div class="hide" id="div">
<font color="#FF0000">this is a hide div~~~~</font>
</div>
</body>

四，为照顾大家，把布局文件也直接贴出出来
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_java2js_show"
android:text="java调用js显示内容"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_java2js_hide"
android:text="java调用js隐藏内容"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<WebView
android:id="@+id/wv_js2java"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>

只需要上面简简单单的四个步骤，就能实现webview中js和java的相互调用了。

注意事项
1，需要在整个html页面加载完成后才能调用js事件，在使用webview加载网页时，
WebViewClient的onPageStarted（加载开始）
onPageFinished加载结束。
所以在网页加载完成后在onPageFinished方法中调用js事件（Android调用js事件改编一些h5页面中的样式）

2，记得在JS调用的JAVA方法前一定要有@JavascriptInterface。
原因是在4.4.2中对JavascriptInterface安全性的要求更高更严格，需要标识出这个方法是能被js调用的方法，以增加安全性。

3，联网获得HTML文档要加权限连接网络：

下面是demo地址。希望能给大家提供帮助。有问题可以留言。最近工作忙，有时间会一一回复大家的。

http://download.csdn.net/detail/qiushi_1990/9324875

来自爱分享的小石头

编程小石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android中webview里js和java的相互调用--含代码demo解析

webview中js和java相互调用的实例代码webview中js和Android代码相互调用下面是个demo步骤一，首先创建一个activitypublic class Js2JavaActivity extends Activity { private Button btn_show,btn_hide; private WebView wv; private JsInterface JSI
复制链接

扫一扫