原文出處：http://blog.csdn.net/wangtingshuai/article/details/8635787

WebView相關(guān)閱讀

• Android WebView 和 javaScript的互相調(diào)用(一)
• Android WebView 和 javaScript的互相調(diào)用(二)
• Android WebView 和 javaScript的互相調(diào)用(三)
• Android WebView與js交互通信
• Android 4.4 中 WebView 使用注意事項
• Android WebView開發(fā)問題匯總
• Android WebView 性能優(yōu)化

方案思路

• 在點擊圖片的時候調(diào)用本地的java方法并給出響應(yīng)的圖片地址
• 本地獲得圖片地址后，開啟一個遮罩activity進行顯示和處理

第二步的實現(xiàn)很容易實現(xiàn)，關(guān)鍵是第一步的實現(xiàn)，在網(wǎng)頁中點擊圖片不會調(diào)用本地的java代碼。那么我們需要給這個點擊事件加上相應(yīng)的js函數(shù)，讓點擊事件調(diào)用的js函數(shù)來調(diào)用我們提前準(zhǔn)備好的java函數(shù)，等我們捕獲到圖片的url剩下的就好處理了。

關(guān)鍵點就是給普通的html注入我們的js函數(shù)，讓圖片能夠響應(yīng)點擊并調(diào)用js函數(shù)，在通過js函數(shù)來調(diào)用我們的java函數(shù)。聽起來好像有點繞，不過也不難，下面我們用代碼實現(xiàn)下

這次實例的主要功能：點擊圖片在新的activity中展示，對圖片能夠進行手勢操作，包括雙指縮放等效果圖

加載webview的activity代碼

@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); // 隨便找了個帶圖片的網(wǎng)站 contentWebView.loadUrl("http://www.weim.me/12408.html"); // 添加js交互接口類，并起別名 imagelistner contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner"); contentWebView.setWebViewClient(new MyWebViewClient()); } // 注入js函數(shù)監(jiān)聽 private void addImageClickListner() { // 這段js函數(shù)的功能就是，遍歷所有的img幾點，并添加onclick函數(shù)，//函數(shù)的功能是在圖片點擊的時候調(diào)用本地java接口并傳遞url過去 contentWebView.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); " + " } " + "}" + "})()"); } // 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); } } // 監(jiān)聽 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加載完成之后，添加監(jiān)聽圖片的點擊js函數(shù) 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代碼

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; } }

布局文件

<?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 默認(rèn)占位圖 --> <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> 《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Android WebView 和 javaScript的互相调用(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。