Android在webview中实现js交互
在webview中实现js交互，常见的即点击事件的处理。当点击webview加载的网页中的某个按钮或图片，调用java代码做出相应处理如跳转到app中的某个页面。此外还可以在跳转页面时从网页获取数据传递参数到新页面。
如图所示，此页为webview加载的网页，点击网页中的头像和进入直播按钮都进入到该新闻主播的直播间页面，html网页中将头像作为图片img标签处理，将按钮作为span标签处理。
具体实现如下：
在activiy中：
private WebView web;
private WebSettings s;
@Override
public void initView() {
web = (WebView) headView.findViewById(R.id. web);
url = "www.xxxxxxxx.com";
// JS交互
s = web.getSettings();
s.setBuiltInZoomControls(true);
s.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
s.setUseWideViewPort(true);
s.setLoadWithOverviewMode(true);
s.setSavePassword(true);
s.setSaveFormData(true);
s.setJavaScriptEnabled(true);
s.setDefaultTextEncodingName("utf-8");
s.setTextSize(TextSize.NORMAL);
web.loadUrl(url);
// 添加js交互接口类，并起别名
web.addJavascriptInterface(new JavascriptInterface(this),
"imagelistner");
web.addJavascriptInterface(new JavascriptInterface(this),
"imagelistner1");
web.setWebViewClient(new MyWebViewClient());
}
// webview监听
private class MyWebViewClient extends WebViewClient {
@Override
public booleanshouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageFinished(view, url);
// html加载完成之后，添加监听头像和监听按钮的的点击js函数
addImageClickListner();
addStockClickListner1();
}
@Override
public void onPageStarted(WebView view, String url,Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true);
super.onPageStarted(view,url, favicon);
progressDialog.show();
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description,String failingUrl) {
super.onReceivedError(view,errorCode, description, failingUrl);
}
}
/**
* js注册
*/
private void addImageClickListner() {
//遍历所有的img节点，并添加onclick函数，在函数执行的时候调用本地接口传递并传递获取到的hostid
host_tie_web.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i
+ "{"
+ " objs[i].οnclick=function() "
+ " { "
+ " window.imagelistner.openImage(this.src,this.getAttribute('hostid')); "
+ " } " + "}" + "})()");
}
private void addStockClickListner1() {
//遍历所有的span节点，并添加onclick函数，在函数执行的时候调用本地接口传递获取到的id
host_tie_web.loadUrl("javascript:(function(){"
+ "var objs =document.getElementsByTagName(\"span\"); "
+ "for(var i=0;i
+ "{"
+ " objs[i].οnclick=function() "
+ " { "
+ " window.imagelistner1.openImage(this.src,this.getAttribute('id')); "
+ " } " + "}" + "})()");
}
// js通信接口
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
public void openImage(String img,String id) {
Intent intent = new Intent();
intent.putExtra("id", id);// 不需要传递参数的则直接设置页面跳转。
intent.setClass(context, HostRoomActivity.class);
context.startActivity(intent);
}
}
tip:页面中有多个交互时，可以创建多个交互接口类，并起别名。html加载完成之后，添加不同的监js函数，在交互函数中用对应的别名调用通信接口中对应的方法。