android webview js交互，响应webview图片的响应事件
2019獨角獸企業重金招聘Python工程師標準>>>
方案思路，
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
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?{??
??
????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);??
????????//?隨便找了個帶圖片的網站??
????????contentWebView.loadUrl("http://www.weim.me/12408.html");??
????????//?添加js交互接口類，并起別名?imagelistner??
????????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?{??
????????@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);??
??
????????}??
????}??
??
}??
展示圖片的activity代碼
[java] view plaincopy
package?wst.webview;??
??
import?java.io.IOException;??
import?java.io.InputStream;??
import?java.net.URL;??
??
import?android.app.Activity;??
import?android.graphics.drawable.BitmapDrawable;??
import?android.graphics.drawable.Drawable;??
import?android.os.Bundle;??
import?android.widget.TextView;??
??
public?class?ShowWebImageActivity?extends?Activity?{??
????private?TextView?imageTextView?=?null;??
????private?String?imagePath?=?null;??
????private?ZoomableImageView?imageView?=?null;??
??
????@Override??
????protected?void?onCreate(Bundle?savedInstanceState)?{??
????????super.onCreate(savedInstanceState);??
????????setContentView(R.layout.show_webimage);??
????????this.imagePath?=?getIntent().getStringExtra("image");??
??
????????this.imageTextView?=?(TextView)?findViewById(R.id.show_webimage_imagepath_textview);??
????????imageTextView.setText(this.imagePath);??
????????imageView?=?(ZoomableImageView)?findViewById(R.id.show_webimage_imageview);??
??
????????try?{??
????????????imageView.setImageBitmap(((BitmapDrawable)?ShowWebImageActivity.loadImageFromUrl(this.imagePath)).getBitmap());??
????????}?catch?(IOException?e)?{??
????????????e.printStackTrace();??
????????}??
????}??
??
????public?static?Drawable?loadImageFromUrl(String?url)?throws?IOException?{??
??
????????URL?m?=?new?URL(url);??
????????InputStream?i?=?(InputStream)?m.getContent();??
????????Drawable?d?=?Drawable.createFromStream(i,?"src");??
????????return?d;??
????}??
}??
圖片布局文件?
[html] view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??
<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
????android:layout_width="fill_parent"??
????android:layout_height="fill_parent"??
????android:orientation="vertical"?>??
??
????<!--?TODO?默認占位圖?-->??
??
????<wst.webview.ZoomableImageView??
????????android:id="@+id/show_webimage_imageview"??
????????android:layout_width="fill_parent"??
????????android:layout_height="fill_parent"??
????????android:scaleType="matrix"??
????????android:src="@drawable/icon"?/>??
??
????<TextView??
????????android:id="@+id/show_webimage_imagepath_textview"??
????????android:layout_width="fill_parent"??
????????android:layout_height="wrap_content"??
????????android:gravity="center"??
????????android:textColor="#ffff0000"?/>??
??
</LinearLayout>?
轉載于:https://my.oschina.net/u/1269662/blog/188499
總結
以上是生活随笔為你收集整理的android webview js交互，响应webview图片的响应事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 初试 2
- 下一篇： Java程序结合Aapche Ant进行