`
dyllove98
  • 浏览: 1404124 次
  • 性别: Icon_minigender_1
  • 来自: 济南
博客专栏
73a48ce3-d397-3b94-9f5d-49eb2ab017ab
Eclipse Rcp/R...
浏览量:39003
4322ac12-0ba9-3ac3-a3cf-b2f587fdfd3f
项目管理checkList...
浏览量:79972
4fb6ad91-52a6-307a-9e4f-816b4a7ce416
哲理故事与管理之道
浏览量:133089
社区版块
存档分类
最新评论

android webview js交互, 响应webview中的图片点击事件

 
阅读更多

欢迎大家访问我的个人网站 萌萌的IT人,后续所有的文章都会在此发布

--------------------------------------------------------------------------------------------
最近碰到个新需求需要点击webview中的图片进行放大显示。
整理了下思路,想到了下面的一个可行的方案。
 
方案思路,
1.在点击图片的时候调用本地的java方法并给出响应的图片地址
2.本地获得图片地址后,开启一个遮罩activity进行显示和处理
 
第二步的实现很容易实现,关键是第一步的实现,在网页中点击图片不会调用本地的java代码。那么我们需要给这个点击事件加上相应的js函数,让点击事件调用的js函数来调用我们提前准备好的java函数,等我们捕获到图片的url剩下的就好处理了。
关键点就是给普通的html注入我们的js函数,让图片能够响应点击并调用js函数,在通过js函数来调用我们的java函数。听起来好像有点绕,不过也不难,下面我们用代码实现下
 
对java和js交互还不熟悉的同学,请参照前面的文章
http://blog.csdn.net/wangtingshuai/article/details/8631835
 
这次实例的主要功能:点击图片在新的activity中展示,对图片能够进行手势操作,包括双指缩放等
效果图
加载webview的activity代码  
 
[java] view plaincopy
  1. package wst.webview;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.content.Intent;  
  7. import android.graphics.Bitmap;  
  8. import android.os.Bundle;  
  9. import android.webkit.WebView;  
  10. import android.webkit.WebViewClient;  
  11.   
  12. @SuppressLint("SetJavaScriptEnabled")  
  13. public class MainActivity extends Activity {  
  14.   
  15.     private WebView contentWebView = null;  
  16.   
  17.     @SuppressLint("SetJavaScriptEnabled")  
  18.     @Override  
  19.     public void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.main);  
  22.         contentWebView = (WebView) findViewById(R.id.webview);  
  23.         // 启用javascript  
  24.         contentWebView.getSettings().setJavaScriptEnabled(true);  
  25.         // 随便找了个带图片的网站  
  26.         contentWebView.loadUrl("http://www.weim.me/12408.html");  
  27.         // 添加js交互接口类,并起别名 imagelistner  
  28.         contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");  
  29.         contentWebView.setWebViewClient(new MyWebViewClient());  
  30.   
  31.     }  
  32.   
  33.     // 注入js函数监听  
  34.     private void addImageClickListner() {  
  35.         // 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去  
  36.         contentWebView.loadUrl("javascript:(function(){" +  
  37.         "var objs = document.getElementsByTagName(\"img\"); " +   
  38.                 "for(var i=0;i<objs.length;i++)  " +   
  39.         "{"  
  40.                 + "    objs[i].onclick=function()  " +   
  41.         "    {  "   
  42.                 + "        window.imagelistner.openImage(this.src);  " +   
  43.         "    }  " +   
  44.         "}" +   
  45.         "})()");  
  46.     }  
  47.   
  48.     // js通信接口  
  49.     public class JavascriptInterface {  
  50.   
  51.         private Context context;  
  52.   
  53.         public JavascriptInterface(Context context) {  
  54.             this.context = context;  
  55.         }  
  56.   
  57.         public void openImage(String img) {  
  58.             System.out.println(img);  
  59.             //  
  60.             Intent intent = new Intent();  
  61.             intent.putExtra("image", img);  
  62.             intent.setClass(context, ShowWebImageActivity.class);  
  63.             context.startActivity(intent);  
  64.             System.out.println(img);  
  65.         }  
  66.     }  
  67.   
  68.     // 监听  
  69.     private class MyWebViewClient extends WebViewClient {  
  70.         @Override  
  71.         public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  72.   
  73.             return super.shouldOverrideUrlLoading(view, url);  
  74.         }  
  75.   
  76.         @Override  
  77.         public void onPageFinished(WebView view, String url) {  
  78.   
  79.             view.getSettings().setJavaScriptEnabled(true);  
  80.   
  81.             super.onPageFinished(view, url);  
  82.             // html加载完成之后,添加监听图片的点击js函数  
  83.             addImageClickListner();  
  84.   
  85.         }  
  86.   
  87.         @Override  
  88.         public void onPageStarted(WebView view, String url, Bitmap favicon) {  
  89.             view.getSettings().setJavaScriptEnabled(true);  
  90.   
  91.             super.onPageStarted(view, url, favicon);  
  92.         }  
  93.   
  94.         @Override  
  95.         public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  
  96.   
  97.             super.onReceivedError(view, errorCode, description, failingUrl);  
  98.   
  99.         }  
  100.     }  
  101.   
  102. }  

展示图片的activity代码
 
[java] view plaincopy
  1. package wst.webview;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.InputStream;  
  5. import java.net.URL;  
  6.   
  7. import android.app.Activity;  
  8. import android.graphics.drawable.BitmapDrawable;  
  9. import android.graphics.drawable.Drawable;  
  10. import android.os.Bundle;  
  11. import android.widget.TextView;  
  12.   
  13. public class ShowWebImageActivity extends Activity {  
  14.     private TextView imageTextView = null;  
  15.     private String imagePath = null;  
  16.     private ZoomableImageView imageView = null;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.show_webimage);  
  22.         this.imagePath = getIntent().getStringExtra("image");  
  23.   
  24.         this.imageTextView = (TextView) findViewById(R.id.show_webimage_imagepath_textview);  
  25.         imageTextView.setText(this.imagePath);  
  26.         imageView = (ZoomableImageView) findViewById(R.id.show_webimage_imageview);  
  27.   
  28.         try {  
  29.             imageView.setImageBitmap(((BitmapDrawable) ShowWebImageActivity.loadImageFromUrl(this.imagePath)).getBitmap());  
  30.         } catch (IOException e) {  
  31.             e.printStackTrace();  
  32.         }  
  33.     }  
  34.   
  35.     public static Drawable loadImageFromUrl(String url) throws IOException {  
  36.   
  37.         URL m = new URL(url);  
  38.         InputStream i = (InputStream) m.getContent();  
  39.         Drawable d = Drawable.createFromStream(i, "src");  
  40.         return d;  
  41.     }  
  42. }  


图片布局文件 
 
[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <!-- TODO 默认占位图 -->  
  8.   
  9.     <wst.webview.ZoomableImageView  
  10.         android:id="@+id/show_webimage_imageview"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="fill_parent"  
  13.         android:scaleType="matrix"  
  14.         android:src="@drawable/icon" />  
  15.   
  16.     <TextView  
  17.         android:id="@+id/show_webimage_imagepath_textview"  
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:gravity="center"  
  21.         android:textColor="#ffff0000" />  
  22.   
  23. </LinearLayout>  

希望对大家有所帮助
源代码附上
分享到:
评论

相关推荐

    安卓webview js交互图片上传前后端代码

    一、Android Webview与JavaScript交互基础 1. 设置Webview支持JavaScript:在初始化Webview时,通过调用`setJavaScriptEnabled(true)`方法启用JavaScript功能。 2. JavaScript接口注入:通过`...

    Android 通过 WebView 与js 简单交互实现图文混排与查看大图功能

    总结,Android中的WebView结合JavaScript交互能实现丰富的用户体验,包括图文混排和查看大图等功能。开发者需要熟练掌握WebView的使用,注意安全性和性能优化,以构建高质量的Android应用。通过上述知识点,你可以在...

    Android-x5webview和js交互的三方库

    X5Webview基于WebKit,并且集成了QQ浏览器的一些高级特性,如硬件加速、视频播放、JavaScript交互等。在许多App中,我们常常需要在原生Android代码和网页内容之间进行交互,这时候就需要利用到X5Webview与JS的交互...

    android4.4 WebView与js交互

    总之,在Android 4.4的WebView中实现Java与JavaScript的交互是一个强大而灵活的功能,可以极大地丰富应用的功能。正确地使用这些交互机制,同时关注安全性和性能优化,可以使用户体验更加流畅,功能更加强大。

    Android实现WebView懒加载

    在WebView中,这通常涉及到JavaScript、图片或者其他大型媒体文件。正常情况下,WebView会一次性加载整个页面,包括所有资源,这样可能导致长时间的等待。通过懒加载,我们可以先加载页面的基本结构,然后在用户滚动...

    Android-WebSocket-WebView_DEMO_websocket_androidwebview_

    4. JavaScript与Android的交互:在JavaScript中,当WebSocket接收到数据时,调用暴露的Java接口方法,将数据传递给Android。 5. 处理WebSocket事件:在Android端,监听WebSocket的状态变化,如连接打开、关闭、错误...

    Android与js交互拍照上传资料

    1. WebView组件:Android中的WebView是一个可以加载和显示网页内容的控件,它是Android与JavaScript交互的基础。通过设置WebView的JavaScript接口,可以让JavaScript调用Android的原生方法。 2. ...

    Android中WebView与HTML+Javascript的交互

    本文将详细讲解如何在Android的WebView中与HTML+JavaScript进行交互。 首先,理解WebView的基本使用。在Android布局XML文件中,我们可以添加一个WebView元素,并设置其属性,如加载的网页URL。在Java代码中,我们...

    Android开发WebView获取SD卡图片并显示

    本文将详细讲解如何在Android的WebView中加载并显示SD卡上的图片,以及如何解决自Android 4.4(KitKat)版本后出现的WebView无法直接访问SD卡图片的问题。 首先,我们需要理解Android 4.4引入的安全限制。从KitKat...

    Android WebView中调用html外部文件并监听操作(源码)

    这篇教程将深入探讨如何在Android的WebView中调用HTML外部文件,并且监听HTML中的操作,以便在用户触发特定事件时(如点击某个链接)执行原生的Android功能,例如拨打电话。我们将基于提供的"WebViewT"压缩包文件...

    鸿蒙webview的使用和JS交互.zip

    为了响应Webview的状态变化,比如页面加载完成、错误发生等,可以注册`WebViewClient`和`WebChromeClient`。这两个类提供了许多回调方法,如`onPageFinished`、`onReceivedError`等。 7. **安全考虑** 当使用`...

    android webview的用法总结

    - 在Android WebView中,处理触摸事件与PC端网页不同。Android的WebView不支持鼠标事件,而是使用触摸事件(ontouchstart, ontouchmove, ontouchend)。要实现拖动功能,需要根据触摸事件来编写代码,以适应移动...

    JS与WebView的交互

    JavaScript(简称JS)和WebView的交互是移动应用开发中的一个重要环节,尤其是在Android平台上。WebView是一个可以展示网页内容的组件,而JS则是网页编程的核心语言。通过JS与WebView的交互,开发者能够实现原生应用...

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

    在Android应用开发中,WebView是一个非常重要的组件,它允许我们加载和显示网页内容。这篇教程将详细介绍如何在Android中利用WebView来调用H5页面,从而实现摄像头扫描二维码的功能。 首先,我们需要理解WebView的...

    android webview jbox2d 源代码 项目源码

    1. JavaScript与Java的交互:使用WebView的addJavascriptInterface方法,可以将Java对象暴露给JavaScript,从而在JavaScript代码中调用Android原生的方法,如控制JBox2D的物理世界。 2. JSON数据交换:为了安全性和...

    android webview 加载本地html 实现 与 java 之间的相互响应

    // 在WebView中添加接口 webView.addJavascriptInterface(new MyJavaScriptInterface(), "android"); ``` 现在,JavaScript可以通过`window.android.callFromJs()`来调用这个接口。 三、JavaScript与Java交互的安全...

    Webview与Javascript相互调用 (Android studio )demo

    例如,我们可以创建一个Java对象并添加到WebView中: ```java webView.addJavascriptInterface(new Object() { @JavascriptInterface public void doSomething(String data) { // 在这里处理来自JavaScript的...

    android中WebView与js的交互

    本示例"android中WebView与js的交互"主要探讨了如何在Android应用中使用WebView调用JavaScript函数以及JavaScript如何调用Android原生方法。 ### 一、Android调用JavaScript 1. **`loadUrl()` 方法**:通过调用 `...

    Android混合开发之webview的demo

    为了让Android按钮能够触发JavaScript函数,我们可以监听按钮的点击事件并执行`loadUrl()`方法来执行JavaScript代码: ```java Button button = findViewById(R.id.button); button.setOnClickListener(new View....

Global site tag (gtag.js) - Google Analytics