我还在 manifest 中设置了 android:usesCleartextTraffic="true"。

对于这个问题有什么建议吗？

解决方法

websettings.setDomStorageEnabled(true); // Turn on DOM storage
websettings.setAllowFileAccess(true); // can read the file cache
websettings.setAppCacheEnabled(true); //Enable H5 (APPCache) caching

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
  webView.evaluateJavascript("window.localStorage.setItem(''"+ key +"'',''"+ val +"'');",null);
} else {
  webView.loadUrl("javascript:localStorage.setItem(''"+ key +"'',''"+ val +"'');");
}

android webview js 交互，响应 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>