Android里WebView详解(二)

来源：互联网发布：linux解压缩zip 编辑：程序博客网时间：2024/06/06 07:11

上一篇讲到了,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);            }

1 0