专栏首页非著名程序员在开发中实现点击 WebView 中的图片,调用原生控件放大展示

在开发中实现点击 WebView 中的图片,调用原生控件放大展示

现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下,如何点击 WebView 中的网页图片,调用原生控件进行放大展示。

其实实现这种交互非常简单,就是通过 JS 调用原生控件。基本思路如下:

  1. 首先加载一个 html 网页,网址或者本地 html 文件都可以。
  2. 遍历 html 标签源代码,找到所有的 img 标签节点。
  3. 给 遍历到得 img 标签节点加上 onClick 事件。
  4. 通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。

效果图

这是在线网址展示的效果图

这是本地 html 文件展示出的效果图

实现方法

html 文件

我们先写一个简单的 html 文件,里面放两张图片。源代码非常简单。代码如下:

<html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    </head>
    <body>
    <h1>显示图片</h1>
    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' />
    <h1>第二张图片</h1>
    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />
    </body>
<html>

写的这个本地的 html 文件,放到 main/assets 目录下即可。

设置 WebView

这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下:

mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//防止中文乱码mWebView.getSettings().setDefaultTextEncodingName("UTF-8");// 先载入JS代码// 格式规定为:file:///android_asset/文件名.html
//mWebView.loadUrl("file:///android_asset/image.html");mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1");//载入jsmWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

关键的代码是:

mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数,一个是 JS 接口,一个是监听函数的名字。

遍历 img 节点,加入监听

   mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //这段js函数的功能就是注册监听,遍历所有的img标签,并添加onClick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
                mWebView.loadUrl("javascript:(function(){"
                        + "var objs = document.getElementsByTagName(\"img\"); "
                        + "for(var i=0;i<objs.length;i++)  " + "{"
                        + "    objs[i].onclick=function()  " + "    {  "
                        + "        window.imagelistner.openImage(this.src);  "
                        + "    }  " + "}" + "})()");
            }
        });
    }

这里有行代码注意一下:

window.imagelistner.openImage(this.src); 

这里就是给每个 img 节点加入点击事件,注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”) 定义的方法名,而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。

通过 JS 接口,调用原生控件

 // js通信接口
 public class JavascriptInterface {

        private Context context;


        public JavascriptInterface(Context context) {
            this.context = context;
        }

        @android.webkit.JavascriptInterface        
        public void openImage(String img) {
            Intent intent = new Intent();
            intent.putExtra("img", img);
            intent.setClass(context, ImageActivity.class);
            context.startActivity(intent);
            System.out.println(img);
        }
    }

这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”) 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。

本文分享自微信公众号 - 非著名程序员(non-famous-coder),作者:loonggg

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web技术与Native APP进入融合时代

    如果说以前的微信公众号还是一个媒体化的平台,那么2016年的公众号会有一种新的形态,叫应用号。应用号预示着比公众号更强大的功能、更优质的体验以及更丰富的服务。应...

    非著名程序员
  • Android 混淆从入门到精通

    ? 简介 作为Android开发者,如果你不想开源你的应用,那么在应用发布前,就需要对代码进行混淆处理,从而让我们代码即使被反编译,也难以阅读。混淆概念虽然容...

    非著名程序员
  • 常见面试第二题之什么是Context

    什么是Context ? 今天的面试题,也就是我们常见面试题系列的第二题,我们来讲一讲android中的context。我相信大家android开发者一定对...

    非著名程序员
  • Python取日期范围循环操作的两种方法

    今天在用Python跑一个数据时,需要遍历一个日期范围,于是在网上找到如下可用的代码,记录一下。

    py3study
  • 汤姆休想把杰瑞叼回家!ML识别器将口含小动物的猫猫拒之门外

    客厅里传来一阵蹦蹦跶跶的声响,沉静的夜晚被打破,名叫Ben Hamm小哥从酣睡中被惊醒,他看了一眼时间,凌晨三点。

    大数据文摘
  • KALI Aircrack-ng 破解WPA WPA2 WIFI密码

    Hello大家好,我是零分,很高兴又和大家见面了,今天呢,咱们不讲C语言,来点“甜豆~”,不知道大家最近有没有上《信息与安全》这门科目。相信大家对黑客这个词已经...

    TheMrxk
  • 关于响应式前端WEB

    响应式 Web 设计 -Viewport什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手...

    企鹅号小编
  • 是时候开始学习一波 MySQL 的私人秘书 binlog 了

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    业余草
  • python - one day

    2008 年出现 python 2.7 与 python 3.0 两个版本,后来 吉多·范罗苏姆 大叔决定停用 python 2.7,但因用户反对,于是决定于 ...

    py3study
  • 3D游戏开发之在UE4中创建非玩家角色(NPC)

    接着上节我们继续学习,现在我们来创建一些NPC(non-playable characters,非玩家角色)。在这个游戏中,当我们靠近NPC时,它们会做出相应的...

    用户1198337

扫码关注云+社区

领取腾讯云代金券