开发需求是点击webview中的图片进行大图查看显示。
那么webview中如何调用js中的方法获取图片资源和图片的position呢?服务端提供的js方法如下:
//调用app内置的图片幻灯片查看图片
$(".newscontent img").click(function(){
if(typeof chanceapp != 'undefined' && $(this).parent().prop('tagName') != 'A' && $(this).parent().parent().prop('tagName') != 'A' && $(this).attr("src").substr(0,5)!="data:"){
var i = 0;
for(i = 0; i < imgs.length; i++){
if(imgs[i] == $(this).attr("src"))break;
}
if(typeof chanceapp.showImgIndex != 'undefined'){
chanceapp.showImgIndex(imgs,i.toString());
}else if(typeof chanceapp.setImgIndex != 'undefined'){
chanceapp.setImgIndex(imgs,i.toString());
}
}
});
这里我们可以看到if(typeof chanceapp.showImgIndex != 'undefined'){
这一句代码中可以看到chanceapp接口中提供了一个showImgIndex()方法,其中包含了图片资源和点击的position。那么我只要想办法调用该方法就行了。
chanceapp.showImgIndex(imgs,i.toString());
}
demo代码:
package com.example.testdemo;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
private WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
webSettings.setPluginState(PluginState.ON);
webSettings.setJavaScriptEnabled(true);// 启动js脚本
webSettings.setBuiltInZoomControls(true);// 启动内置缩放
webSettings.setSupportZoom(false);// 支持缩放
webSettings.setUseWideViewPort(true);// 设置此属性,可任意比例缩放
webSettings.setLoadWithOverviewMode(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setDomStorageEnabled(true); //处理js方法调用出错情况
webview.requestFocusFromTouch();
webSettings.setSaveFormData(false); //不缓存表单数据
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置脚本是否允许自动打开弹窗,默认false,不允许
webview.loadUrl("http://sz.21chance.com/wweb_8/newsdetail.php?accid=4&newsid=28816");
//添加与js的交互接口,起的名称与js代码中的接口名称要一致
webview.addJavascriptInterface(new JavascriptImgInterface(), "chanceapp");
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url != null) {
view.loadUrl(url);
}
return true;
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
}
});
}
public class JavascriptImgInterface{
JavascriptImgInterface(){
}
/**
* 注意: 在Android4.2极其以上系统需要给提供js调用的方法前加入一个注视:@JavaScriptInterface;
* 在虚拟机当中 Javascript调用Java方法会检测这个anotation,
* 如果方法被标识@JavaScriptInterface则Javascript可以成功调用这个Java方法,否则调用不成功。
*
* @param imgs
* @param position
*/
@JavascriptInterface
public void showImgIndex(String[] imgs, String position){
//这里就拿到图片数据和点击的位置
Log.i("TAG", "position: " + position + "," +imgs[Integer.valueOf(position)]);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
webview.clearFormData();
webview.destroy();
}
}
简单记录下,写代码时因为忽视查看JS代码造成了一个小问题。在进行交互时主要要看清楚js中提供的方法。