android webview js交互，响应webview中的图片点击事件 ,点击（双击）使图片变大，单击退出

最新推荐文章于 2024-07-10 19:25:11 发布

再见北洋园

最新推荐文章于 2024-07-10 19:25:11 发布

阅读量3k

点赞数

文章标签： android webview js响应交互

本文链接：https://blog.csdn.net/zlb_lover/article/details/52820241

版权

最近碰到个新需求需要点击webview中的图片进行放大显示。

整理了下思路，想到了下面的一个可行的方案。
http://download.csdn.net/detail/zlb_lover/9654404 代码下载地址

方案思路，

1.在点击图片的时候调用本地的java方法并给出响应的图片地址

2.本地获得图片地址后，开启一个遮罩activity进行显示和处理

第二步的实现很容易实现，关键是第一步的实现，在网页中点击图片不会调用本地的java代码。那么我们需要给这个点击事件加上相应的js函数，让点击事件调用的js函数来调用我们提前准备好的java函数，等我们捕获到图片的url剩下的就好处理了。

关键点就是给普通的html注入我们的js函数，让图片能够响应点击并调用js函数，在通过js函数来调用我们的java函数。听起来好像有点绕，不过也不难，下面我们用代码实现下

这次实例的主要功能：点击图片在新的activity中展示，对图片能够进行手势操作，包括双指缩放等

效果图

1。加载webview的MainActivity.java代码

package wst.webview;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
   
   /**
    *
    *    最近碰到个新需求需要点击webview中的图片进行放大显示。
    整理了下思路，想到了下面的一个可行的方案。

    方案思路，
    1.在点击图片的时候调用本地的java方法并给出响应的图片地址
    2.本地获得图片地址后，开启一个遮罩activity进行显示和处理

    第二步的实现很容易实现，关键是第一步的实现，在网页中点击图片不会调用本地的java代码。那么我们需要给这个点击事件加上相应的js函数，让点击事件调用的js函数来调用我们提前准备好的java函数，等我们捕获到图片的url剩下的就好处理了。
    关键点就是给普通的html注入我们的js函数，让图片能够响应点击并调用js函数，在通过js函数来调用我们的java函数。听起来好像有点绕，不过也不难，下面我们用代码实现下
    */
//加载webview的activity代码
   private WebView contentWebView = null;

   @SuppressLint("SetJavaScriptEnabled")
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      contentWebView = (WebView) findViewById(R.id.webview);
      //启用javascript
      contentWebView.getSettings().setJavaScriptEnabled(true);

      //这个使我项目的webview的js语法代码。
      String ui="<head>\n" +
            "     <style>\n" +
            "     .center_image { width: 100%}\n" +
            "     .hide_image { display: none}\n" +
            "     </style>\n" +
            "     </head><img class='center_image' src='https://img.alicdn.com/imgextra/i4/656010309/TB2OYr1uXXXXXb3XpXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i2/656010309/TB208UcuXXXXXadXpXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i4/656010309/TB20iQsuXXXXXa_XXXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i2/656010309/TB2I8UquXXXXXbZXXXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i4/656010309/TB2nrgAuXXXXXanXXXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i1/656010309/TB2DTMCuXXXXXXZXXXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i2/656010309/TB2B3Y1uXXXXXcjXpXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i3/656010309/TB2KjAguXXXXXXMXpXXXXXXXXXX_!!656010309.jpg'><img class='center_image' src='https://img.alicdn.com/imgextra/i4/656010309/TB2fshcXb75VKBjy0FcXXbAkXXa_!!656010309.jpg'><script>\n" +
            "     var imgs = document.getElementsByClassName('center_image');\n" +
            "     for (var i = 0; i < imgs.length; i++) {
   \n" +
            "     imgs[i]['index']=i;\n" +
            "     imgs[i].addEventListener('load', function() {
   \n" +
            "     if (imgs[this.index].naturalWidth < 100) {
   \n" +
            "     this.className += ' hide_image';\n" +
            "     }\n" +
            "     });\n" +
            "     imgs[i].addEventListener('error', function() {
   \n" +
            "     this.className += ' hide_image';\n" +
            "     });\n" +
            "     }\n" +
            "     </script>";
      //给webView添加js代码
      contentWebView.loadData(ui,"text/html","utf-8");
      // 添加js交互接口类，并起别名 imagelistner  addJavaScriptInterface方式帮助我们从一个网页传递值到Android XML视图（反之亦然）。
      contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
      contentWebView.setWebViewClient(new MyWebViewClient());

   }

   // 注入js函数监听
   private void addImageClickListner() {
      // 这段js函数的功能就是，遍历所有的img，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
      contentWebView.loadUrl("javascript:(function(){" +
      "var objs = document.getElementsByTagName(\"img\"); " + 
            "for(var i=0;i<objs.length;i++)  " + 
      "{"
            + "    objs[i].οnclick=function()  " + 
      "    {  " 
            + "        window.imagelistner.openImage(this.src);  " + 
      "    }  " + 
      "}" + 
      "})()");
   }

   // js通信接口
   public class JavascriptInterface {

      private Context context;

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

      public void openImage(String img) {
         System.out.println(img);

         Intent intent = new Intent();
         intent.putExtra("image", img);
         intent.setClass(context, ShowWebImageActivity.class);
         context.startActivity(intent);
         System.out.println(img);
      }
   }


   private class MyWebViewClient extends WebViewClient {

      //在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {

         return super.shouldOverrideUrlLoading(view, url);
      }

      //在页面加载结束时调用。
      @Override
      public void onPageFinished(WebView view, String url) {

         view.getSettings().setJavaScriptEnabled(true);

         super.onPageFinished(view, url);
         // html加载完成之后，添加监听图片的点击js函数
         addImageClickListner();

      }



      //在页面加载开始时调用。
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
         view.getSettings().setJavaScriptEnabled(true);

         super.onPageStarted(view, url, favicon);
      }

      @Override
      public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

         super.onReceivedError(view, errorCode, description, failingUrl);

      }
   }

}

2、展示图片的ShowWebImage.java代码

package wst.webview;

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;

import java.io.IOException;
import java.io.InputStream;
import java.net.URL;

public class ShowWebImageActivity extends Activity {
   /**
    *  在一个activity中销毁指定activity
    */

最低0.47元/天解锁文章

再见北洋园

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
android webview js交互，响应webview中的图片点击事件 ,点击（双击）使图片变大，单击退出

最近碰到个新需求需要点击webview中的图片进行放大显示。整理了下思路，想到了下面的一个可行的方案。http://download.csdn.net/detail/zlb_lover/9654404 代码下载地址方案思路，1.在点击图片的时候调用本地的java方法并给出响应的图片地址2.本地获得图片地址后，开启一个遮罩activity进行显示和处理第二
复制链接

扫一扫