Android里WebView详解(二)

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

Android里WebView详解(二)

猜你喜欢