上一篇讲到了,WebView的一般用法,接下来跟大家讲解下怎么获取html里面的图片,并点击可以放大并左右可以滑动
分析
第一 : 新闻里面的图片都可以被点击
第二 : 调到图片详请的时候,传递了一些什么数据
1. 当前点击图片的地址
2. 所有图片的地址
第三 : 当前图片的地址,所有图片的地址,图片点击的实现js做的–>传递java本地代码
步骤
1.动态为图片添加点击事件
2.点击的时候,得到所有图片的地址和得到当前图片的地址,并传递给Java本地代码
3.java本地代码收到数据之后—>跳转到图片详请,进行图片展示
开始写代码
步骤一
创建一个js里面的方法类
public class JsObject {
private String mCurImgUrl;
private String mAllImgUrl;
private Context mContext;
public JsObject(Context context) {
mContext = context;
}
/**
* @param message
* @des js传递相关的数据给java本地代码
* @called 在js里面的相应的方法里面触发调用
*/
@JavascriptInterface
public void passMessageToJava(String message) {
System.out.println("message:" + message);
}
@JavascriptInterface
public void passCurImgUrl(String curImgUrl) {
System.out.println("curImgUrl:" + curImgUrl);
mCurImgUrl = curImgUrl;
Intent intent = new Intent(mContext, DetailPicActivity.class);
intent.putExtra("curImgUrl", mCurImgUrl);
intent.putExtra("allImgUrl", mAllImgUrl);
mContext.startActivity(intent);
}
@JavascriptInterface
public void passAllImgUrl(String allImgUrl) {
mAllImgUrl = allImgUrl;
System.out.println("allImgUrl:" + allImgUrl);
}
}
步骤二,写一个本地js脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
var aa = function() {
//就需要调用java本地的代码
window.hm26.passMessageToJava("来自js代码的问候");
}
var bb = function() {
//所有图片地址的变量
var imageList = "";
//1. 找到标签为img的元素的集合
var imgs = document.getElementsByTagName("img");
//2. 遍历数组,为img元素添加点击事件
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
imageList = imageList + img.src + ";";
img.onclick = function() {
//传递当前的src给java
//bindJs:这个是java代码中定义的name
//openImg:是桥梁类定义的方法
window.ancely.passCurImgUrl(this.src);
//打印点击img对象的src属性
// alert(this.src);
}
}
//传输所有的src给java,其中"bindJs"是在java中定义的
window.ancely.passAllImgUrl(imageList);
//ancly是我们定义的一个别名,用来区分执行哪个脚本
}
</script>
</head>
<body>
<h1>哈哈</h1>
<button onclick="aa()">点击我,就可以调用java本地代码定义的方法</button>
<img src="http://192.168.33.94:8080/img/20.jpg"/>
<img src="http://192.168.33.94:8080/img/ca1349540923dd54489f106fd309b3de9d8248cc.jpg"/>
<img src="http://192.168.33.94:8080/img/a2cc7cd98d1001e9c052a108ba0e7bec54e7974f.jpg"/>
<img src="http://192.168.33.94:8080/img/eac4b74543a98226e5f5cd768882b9014a90ebaf.jpg"/>
</body>
</html>
步骤三 开始执行代码
mWebview.loadUrl("file:///android_asset/url")
mWebview.addJavascriptInterface(new JsObject(), "ancely");
由于这样写有点麻烦,如果方法一改我们就得变,所以这里做了一个动态加载的方法
第一:定义一个js脚本
String jsScript = "(function() {\n" +
" var imageList = \"\";\n" +
" var imgs = document.getElementsByTagName(\"img\");\n" +
" for (var i = 0; i < imgs.length; i++) {\n" +
" var img = imgs[i];\n" +
" imageList = imageList + img.src + \";\";\n" +
" img.onclick = function() {\n" +
" window.hm26.passCurImgUrl(this.src);\n" +
" }\n" +
" }\n" +
" window.hm26.passAllImgUrl(imageList);})()";//这最后的小括号是调用的意思
第二 定义执行脚本里的方法
/**
* 动态执行js脚本
*
* @param webView
* @param jsScript
*/
public void executeJs(WebView webView, String jsScript) {
webView.loadUrl("javascript:" + jsScript);
}
第三 : 在Activity里面WebView加载完后执行启动代码
@Override
public void onPageFinished(WebView view, String url) {
mProgressBar.setVisibility(View.GONE);
//加载完成时动态的执行js脚本
executeJs(view, jsScript);
super.onPageFinished(view, url);
}