`

实现点击 WebView 中的图片,调用原生控件展示图片

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

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

实现方法
我们先写一个简单的 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");
        //载入js
        mWebView.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);
        }
    }

这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。
分享到:
评论

相关推荐

    Android和Iphone如何在webview中调用原生日期选取控件?

    本篇文章将详细探讨如何在Android和iOS平台上,利用原生的日期选取控件(`DatePicker`)在`WebView`中实现用户友好的日期选择。 ### Android 平台 在Android中,我们可以使用`WebView`的`addJavascriptInterface`...

    html页面如何用iOS的原生控件展示

    ()"&gt;点击显示原生控件 function callNative() { window.webkit.messageHandlers.nativeCall.postMessage("显示控件"); } ``` 通过这种方式,你可以根据JavaScript传递的信息动态地在HTML页面上添加或改变原生...

    Android APP使用WebView调用H5页面完成摄像头扫描二维码软件源码.rar

    这个源码示例展示了如何在WebView中调用H5页面,并利用Android原生的摄像头功能来扫描二维码,实现二维码识别。下面我们将详细探讨这个过程中涉及的关键知识点。 1. **WebView组件**:WebView是Android SDK提供的一...

    Android使用WebView调用H5完成摄像头扫描二维码

    以上就是利用WebView调用H5页面完成摄像头扫描二维码的基本流程。这个功能使得开发者能够轻松地在Android应用中实现二维码扫描,而无需依赖第三方库或者原生开发。同时,由于H5页面的灵活性,更新和维护也变得更加...

    图片轮播(Viwepager)+(读取网络图片)+点击图片(WebView)展示_android轮播图.zip

    本项目的核心是利用`ViewPager`实现图片轮播,并结合加载网络图片的技术以及点击图片后在`WebView`中展示详情。下面将详细解释这些关键知识点。 1. **ViewPager组件**: `ViewPager`是Android SDK中的一个强大控件...

    Android代码-安卓原生调用html和html调用原生

    这种通信通常通过WebView组件来实现,WebView是Android系统提供的一种可以加载和显示网页的控件。 **一、Android原生调用HTML** 1. **WebView的使用**: 首先,在Android布局文件中添加一个WebView组件,并在...

    webview控件的使用

    在Android开发中,WebView是一个非常重要的组件,它允许我们在原生的应用程序中嵌入网页内容,使得用户可以在不离开应用的情况下浏览网页。本篇将详细讲解WebView的使用、功能及常见配置。 首先,WebView的基本使用...

    android webview控件案例

    综上所述,"android webview控件案例"涵盖了WebView的基本使用,包括加载网页、处理链接点击、显示进度条、设置缓存策略以及JavaScript与原生应用的交互。通过这个案例,开发者可以深入理解WebView的工作原理,并在...

    Android WebView控件的用法

    总之,Android WebView控件为开发者提供了在原生应用中展示网页内容的强大能力。通过深入了解和熟练运用,我们可以创建出既具有原生应用体验,又能够利用网页丰富功能的应用程序。在实际开发中,应结合项目需求,...

    webview控件使用(java代码和js的互相调用)

    本篇将详细介绍如何使用WebView控件以及实现Java代码与JavaScript的互相调用。 首先,我们需要在AndroidManifest.xml文件中为WebView应用网络权限: ```xml ``` 接着,在布局文件(如activity_main.xml)中添加...

    webview--长按识别二维码

    WebView是Android和iOS等操作系统提供的一个原生控件,它能够加载和显示HTML、CSS和JavaScript等内容。当用户在WebView中浏览网页时,如果网页中包含二维码图片,我们可以通过监听用户的长按事件来触发二维码识别。 ...

    使用WebView中的Javascript和本地代码交互

    在Android布局文件中,我们可以添加一个WebView控件,如下所示: ```xml &lt;WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" /&gt; ``` 然后,在...

    android中WebView回调js的方法

    在布局文件中,我们可以添加一个WebView控件,并设置其加载特定的URL: ```xml &lt;WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /&gt; ``` 然后在...

    IOS webview 图片弹出

    )`或`webView(_:decidePolicyFor:)`代理方法中,检测到URL变化后,读取这个全局变量,然后使用iOS原生的`UIImage`类加载图片,并弹出一个`UIImageView`或使用`UIActionSheet`、`UIAlertController`等控件展示图片。...

    webview的简单实现

    还可以根据需求调整其他WebSettings,如启用缩放(setBuiltInZoomControls()),隐藏原生的缩放控件(setDisplayZoomControls(false)),启用加载图片(setLoadsImagesAutomatically(true))等。 8. **权限管理** ...

    WebView_jsp页面跳转到原生Activity

    WebView是Android SDK中的一个控件,它允许应用程序加载并展示HTML、CSS和JavaScript内容。通过使用WebView,开发者可以在不离开应用程序的情况下提供丰富的网络体验。 2. **jsp页面**: JSP(JavaServer Pages)...

    Android通过webview控件实现webapp的demo androidstudio

    在Android开发中,Webview控件是一个非常重要的组件,它允许开发者在应用程序中嵌入网页内容,从而实现Web与原生应用的结合,这就是我们常说的WebAPP。本项目是基于Android Studio的一个示例,展示了如何利用Webview...

    Webview使用外加长按图片保存

    在本文中,我们将深入探讨如何在WebView中处理用户长按图片并实现保存图片的功能。 首先,我们需要理解WebView的基本用法。WebView是Android SDK提供的一种用于加载和显示网页的视图控件。我们可以使用`WebView....

    Android WebView HTML界面开发 实现拨打电话

    在布局文件(如activity_main.xml)中,添加WebView控件: ```xml &lt;WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /&gt; ``` 2. **WebView的...

    android JS与原生的调用

    总结,Android中的JS与原生调用主要依赖`WebView`组件,通过JavaScript Interface、WebChromeClient、evaluateJavascript等方法实现交互。在实际开发中,我们需要权衡性能、安全性和功能需求,选择合适的方式来实现...

Global site tag (gtag.js) - Google Analytics