带你解决安卓 WebView 里的常见问题

admin

带你解决安卓 WebView 里的常见问题。

通常我们在自己开发的 APP 中打开网页无非两种方法： 一是跳转到系统自带的浏览器，二是使用 WebView 控件加载页面。使用 WebView 控件的好处就是可以通过各种 api 接口来定制各种行为，常用的几个设置地方为WebSettings、JavaScriptInterface、WebViewClient 和 WebChromeClient。平时出现的问题都可以通过修改这些设置来解决。

WebView.jpg

使用了 WebView 还是跳转到了系统自带的浏览器？

很简单的解决方法，为你的 webview 设置一个新的 WebViewClient。

1. webView.setWebViewClient(new WebViewClient(){
   
2.     @Override
   
3.     public boolean shouldOverrideUrlLoading(WebView view, String url) {
   
4.         view.loadUrl(url);
   
5.         return true;
   
6.     }
   
7. });

复制代码

1. // 或者直接添加，效果是一样的
   
2. webView.setWebViewClient(new WebViewClient());

复制代码

获取网页的标题和图标

通过 WebChromeClient 可以获取到这些信息。

1. webView.setWebChromeClient(new WebChromeClient() {
   
2.     @Override
   
3.     public void onReceivedTitle(WebView view, String title) {
   
4.         super.onReceivedTitle(view, title);
   
5.         setTitle(title);
   
6.     }
   
7. 
   
8.     @Override
   
9.     public void onReceivedIcon(WebView view, Bitmap icon) {
   
10.         super.onReceivedIcon(view, icon);
    
11.         setIcon(icon);
    
12.     }
    
13. 
    
14. });

复制代码

但是，这里有个问题，当通过 webView.goBack() 方式返回上一级Web页面的时候不会触发这个方法，因此会导致标题无法跟随历史记录返回上一级页面。所以需要在 onPageFinished() 中对界面标题重新设置。

1. webView.setWebViewClient(new WebViewClient(){
   
2.     @Override
   
3.     public void onPageFinished(WebView view, String url) {
   
4.         super.onPageFinished(view, url);
   
5.         setTitle(String.valueOf(view.getTitle()));
   
6.     }
   
7. });

复制代码

返回键实现网页的后退键

在 WebView 中可以通过 goBack() 方法后退到历史记录的上一项。

1.     // 在 Actvity 中监听返回键按钮
   
2.     @Override
   
3.     public void onBackPressed() {
   
4.         if (webView.canGoBack())
   
5.             webView.goBack();
   
6.         else
   
7.             super.onBackPressed();
   
8.     }

复制代码

设置 WebView 的 header

在 WebView 的 loadUrl() 方法中传入 Header 参数即可。

1. public void loadURLWithHTTPHeaders() {
   
2.     final String url = "http://cpacm.net";
   
3.     WebView webView = new WebView(getActivity());
   
4.     Map<String,String> extraHeaders = new HashMap<String, String>();
   
5.     extraHeaders.put("Referer", "http://www.google.com");
   
6.     webView.loadUrl(url, extraHeaders);
   
7. }

复制代码

设置 WebView 的 User-Agent

不要试图在 Header 里面去修改，而是在 WebSettings 修改

1. webView.getSettings().setUserAgentString("Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0");

复制代码

如何设置 WebView 的缓存

当需要本地缓存网页的时候就需要打开 WebViewSettings 的缓存开关,这样子当下次进到该页面无网络的情况下也能打开页面。

1. WebSettings settings = webView.getSettings();
   
2. settings.setAppCacheEnabled(true); //启用应用缓存
   
3. settings.setDomStorageEnabled(true); //启用或禁用DOM缓存。
   
4. settings.setDatabaseEnabled(true); //启用或禁用DOM缓存。
   
5. if (SystemUtil.isNetworkConnected()) { //判断是否联网
   
6.     settings.setCacheMode(WebSettings.LOAD_DEFAULT); //默认的缓存使用模式
   
7. } else {
   
8.     settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY); //不从网络加载数据，只从缓存加载数据。
   
9. }

复制代码

无法下载文件？

在自己写的 WebView 下是无法直接下载文件，需要自己监听下载事件并对下载的动作进行处理。

1. /**
   
2. * 当下载文件时打开系统自带的浏览器进行下载，当然也可以对捕获到的 url 进行处理在应用内下载。
   
3. **/
   
4. webView.setDownloadListener(new FileDownLoadListener());
   
5. 
   
6. private class FileDownLoadListener implements DownloadListener {
   
7.     @Override
   
8.     public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
   
9.         Uri uri = Uri.parse(url);
   
10.         Intent intent = new Intent(Intent.ACTION_VIEW, uri);
    
11.         startActivity(intent);
    
12.     }
    
13. }

复制代码

无法打开文件选择器？

通过重写 WebChromeClient 来实现点击 <input type='file'> 来打开系统文件选择器。

一个完整的Activity示例

1. public class MainActivity extends AppCompatActivity {
   
2. 
   
3.     /** Android 5.0以下版本的文件选择回调 */
   
4.     protected ValueCallback<Uri> mFileUploadCallbackFirst;
   
5.     /** Android 5.0及以上版本的文件选择回调 */
   
6.     protected ValueCallback<Uri[]> mFileUploadCallbackSecond;
   
7. 
   
8.     protected static final int REQUEST_CODE_FILE_PICKER = 51426;
   
9. 
   
10. 
    
11.     protected String mUploadableFileTypes = "image/*";
    
12. 
    
13.     private WebView mWebView;
    
14. 
    
15.     @Override
    
16.     protected void onCreate(Bundle savedInstanceState) {
    
17.         super.onCreate(savedInstanceState);
    
18.         setContentView(R.layout.activity_main);
    
19. 
    
20.         initWebView();
    
21.     }
    
22. 
    
23.     private void initWebView() {
    
24.         mWebView = (WebView) findViewById(R.id.my_webview);
    
25. 
    
26.         mWebView.loadUrl("file:///android_asset/index.html");
    
27.         mWebView.setWebChromeClient(new OpenFileChromeClient());
    
28.     }
    
29. 
    
30.     private class OpenFileChromeClient extends WebChromeClient {
    
31. 
    
32.         //  Android 2.2 (API level 8)到Android 2.3 (API level 10)版本选择文件时会触发该隐藏方法
    
33.         @SuppressWarnings("unused")
    
34.         public void openFileChooser(ValueCallback<Uri> uploadMsg) {
    
35.             openFileChooser(uploadMsg, null);
    
36.         }
    
37. 
    
38.         // Android 3.0 (API level 11)到 Android 4.0 (API level 15))版本选择文件时会触发，该方法为隐藏方法
    
39.         public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
    
40.             openFileChooser(uploadMsg, acceptType, null);
    
41.         }
    
42. 
    
43.         // Android 4.1 (API level 16) -- Android 4.3 (API level 18)版本选择文件时会触发，该方法为隐藏方法
    
44.         @SuppressWarnings("unused")
    
45.         public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
    
46.             openFileInput(uploadMsg, null, false);
    
47.         }
    
48. 
    
49.         // Android 5.0 (API level 21)以上版本会触发该方法，该方法为公开方法
    
50.         @SuppressWarnings("all")
    
51.         public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
    
52.             if (Build.VERSION.SDK_INT >= 21) {
    
53.                 final boolean allowMultiple = fileChooserParams.getMode() == FileChooserParams.MODE_OPEN_MULTIPLE;//是否支持多选
    
54.                 openFileInput(null, filePathCallback, allowMultiple);
    
55.                 return true;
    
56.             }
    
57.             else {
    
58.                 return false;
    
59.             }
    
60.         }
    
61.     }
    
62. 
    
63.     @SuppressLint("NewApi")
    
64.     protected void openFileInput(final ValueCallback<Uri> fileUploadCallbackFirst, final ValueCallback<Uri[]> fileUploadCallbackSecond, final boolean allowMultiple) {
    
65.         //Android 5.0以下版本
    
66.         if (mFileUploadCallbackFirst != null) {
    
67.             mFileUploadCallbackFirst.onReceiveValue(null);
    
68.         }
    
69.         mFileUploadCallbackFirst = fileUploadCallbackFirst;
    
70. 
    
71.         //Android 5.0及以上版本
    
72.         if (mFileUploadCallbackSecond != null) {
    
73.             mFileUploadCallbackSecond.onReceiveValue(null);
    
74.         }
    
75.         mFileUploadCallbackSecond = fileUploadCallbackSecond;
    
76. 
    
77.         Intent i = new Intent(Intent.ACTION_GET_CONTENT);
    
78.         i.addCategory(Intent.CATEGORY_OPENABLE);
    
79. 
    
80.         if (allowMultiple) {
    
81.             if (Build.VERSION.SDK_INT >= 18) {
    
82.                 i.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
    
83.             }
    
84.         }
    
85. 
    
86.         i.setType(mUploadableFileTypes);
    
87. 
    
88.         startActivityForResult(Intent.createChooser(i, "选择文件"), REQUEST_CODE_FILE_PICKER);
    
89. 
    
90.     }
    
91. 
    
92.     public void onActivityResult(final int requestCode, final int resultCode, final Intent intent) {
    
93.         if (requestCode == REQUEST_CODE_FILE_PICKER) {
    
94.             if (resultCode == Activity.RESULT_OK) {
    
95.                 if (intent != null) {
    
96.                     //Android 5.0以下版本
    
97.                     if (mFileUploadCallbackFirst != null) {
    
98.                         mFileUploadCallbackFirst.onReceiveValue(intent.getData());
    
99.                         mFileUploadCallbackFirst = null;
    
100.                     }
     
101.                     else if (mFileUploadCallbackSecond != null) {//Android 5.0及以上版本
     
102.                         Uri[] dataUris = null;
     
103. 
     
104.                         try {
     
105.                             if (intent.getDataString() != null) {
     
106.                                 dataUris = new Uri[] { Uri.parse(intent.getDataString()) };
     
107.                             }
     
108.                             else {
     
109.                                 if (Build.VERSION.SDK_INT >= 16) {
     
110.                                     if (intent.getClipData() != null) {
     
111.                                         final int numSelectedFiles = intent.getClipData().getItemCount();
     
112. 
     
113.                                         dataUris = new Uri[numSelectedFiles];
     
114. 
     
115.                                         for (int i = 0; i < numSelectedFiles; i++) {
     
116.                                             dataUris[i] = intent.getClipData().getItemAt(i).getUri();
     
117.                                         }
     
118.                                     }
     
119.                                 }
     
120.                             }
     
121.                         }
     
122.                         catch (Exception ignored) { }
     
123.                         mFileUploadCallbackSecond.onReceiveValue(dataUris);
     
124.                         mFileUploadCallbackSecond = null;
     
125.                     }
     
126.                 }
     
127.             }
     
128.             else {
     
129.                 //这里mFileUploadCallbackFirst跟mFileUploadCallbackSecond在不同系统版本下分别持有了
     
130.                 //WebView对象，在用户取消文件选择器的情况下，需给onReceiveValue传null返回值
     
131.                 //否则WebView在未收到返回值的情况下，无法进行任何操作，文件选择器会失效
     
132.                 if (mFileUploadCallbackFirst != null) {
     
133.                     mFileUploadCallbackFirst.onReceiveValue(null);
     
134.                     mFileUploadCallbackFirst = null;
     
135.                 }
     
136.                 else if (mFileUploadCallbackSecond != null) {
     
137.                     mFileUploadCallbackSecond.onReceiveValue(null);
     
138.                     mFileUploadCallbackSecond = null;
     
139.                 }
     
140.             }
     
141.         }
     
142.     }
     
143. 
     
144. }

复制代码

怎么为 WebView 的加载添加进度条

这里的 onPageFinished() 有个问题，不能在这里监听页面是否加载完毕（我自己测试的时候，好像在重定向和加载完 iframes 时都会调用这个方法）。
把页面加载完毕的判断放在 onProgressChanged() 里可能会更为准确。

1. webView.setWebChromeClient(new WebChromeClient() {
   
2. 
   
3.     @Override
   
4.     public void onProgressChanged(WebView view, int position) {
   
5.         progressBar.setProgress(position);
   
6.         if (position == 100) {
   
7.             progressBar.setVisibility(View.GONE);
   
8.         }
   
9.         super.onProgressChanged(view, position);
   
10.     }
    
11. });
    
12. 
    
13. webView.setWebViewClient(new WebViewClient(){
    
14.     @Override
    
15.     public void onPageStarted(WebView view, String url, Bitmap favicon) {
    
16.         progressBar.setVisibility(View.VISIBLE);
    
17.         super.onPageStarted(view, url, favicon);
    
18.     }
    
19. });

复制代码

怎样对页面进行 Js 注入？

首先你要在 WebView 开启 JavaScript,然后搭建桥梁

1. WebSettings webSettings = webView.getSettings();
   
2. webSettings.setJavaScriptEnabled(true);
   
3. webView.addJavascriptInterface(new WebAppBridge(new WebAppBridge.OauthLoginImpl() {
   
4.             @Override
   
5.             public void getResult(String s) {
   
6.                 //TODO
   
7.             }
   
8.         }),
   
9.         "oauth");
   
10. webView.loadUrl("javascript:" + getAssetsJs("autologin.js"));
    
11. webView.loadUrl("javascript:adduplistener()");

复制代码

WebAppBridge的代码

1. public class WebAppBridge {
   
2. 
   
3.     private OauthLoginImpl oauthLogin;
   
4. 
   
5.     public WebAppBridge(OauthLoginImpl oauthLogin) {
   
6.         this.oauthLogin = oauthLogin;
   
7.     }
   
8. 
   
9.     @JavascriptInterface
   
10.     public void getResult(String str) {
    
11.         if (oauthLogin != null)
    
12.             oauthLogin.getResult(str);
    
13.     }
    
14. 
    
15.     public interface OauthLoginImpl {
    
16.         void getResult(String s);
    
17.     }
    
18. }

复制代码

简单的说就是向网页注入一段 js, 在这段 js 里面设置回调到java中的方法 getResult()，由 WebAppBridge.getResult 来回收。
其中js的核心代码为

1. oauth.getResult(str);

复制代码

其中 oauth 这个名称要与 webView.addJavascriptInterface()方法的第二个参数一样。

具体的代码可以参考这个项目中写的 js 注入逻辑 OauthDialog

如何手动添加 Cookie

需要获得 CookieManager 的对象并将 cookie 设置进去。
从服务器的返回头中取出 cookie 根据Http请求的客户端不同，获取 cookie 的方式也不同，请自行获取。

1. /**
   
2. * 将cookie设置到 WebView
   
3. * @param url 要加载的 url
   
4. * @param cookie 要同步的 cookie
   
5. */
   
6. public static void syncCookie(String url,String cookie) {
   
7.     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
   
8.         CookieSyncManager.createInstance(context);
   
9.     }
   
10.     CookieManager cookieManager = CookieManager.getInstance();
    
11.     cookieManager.setAcceptCookie(true);
    
12. 
    
13.     /**
    
14.      * cookie 设置形式
    
15.      * cookieManager.setCookie(url, "key=value;" + "domain=[your domain];path=/;")
    
16.     **/
    
17.     cookieManager.setCookie(url, cookie);
    
18. }

复制代码

删除 Cookie 的方法

1. /**
   
2. * 这个两个在 API level 21 被抛弃
   
3. * CookieManager.getInstance().removeSessionCookie();
   
4. * CookieManager.getInstance().removeAllCookie();
   
5. *
   
6. * 推荐使用这两个， level 21 新加的
   
7. * CookieManager.getInstance().removeSessionCookies();
   
8. * CookieManager.getInstance().removeAllCookies();
   
9. **/
   
10. public static void removeCookies() {
    
11.     CookieManager cookieManager = CookieManager.getInstance();
    
12.     cookieManager.removeAllCookie();
    
13.     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    
14.         cookieManager.flush();
    
15.     } else {
    
16.         CookieSyncManager.createInstance(Application.getInstance());
    
17.         CookieSyncManager.getInstance().sync();
    
18.     }
    
19. }

复制代码

如何使 HTML5 video 在 WebView 全屏显示

当网页全屏播放视频时会调用 WebChromeClient.onShowCustomView() 方法，所以可以通过将 video 播放的视图全屏达到目的。

1. @Override
   
2. public void onShowCustomView(View view, CustomViewCallback callback) {
   
3.     if (view instanceof FrameLayout && fullScreenView != null) {
   
4.         // A video wants to be shown
   
5.         this.videoViewContainer = (FrameLayout) view;
   
6.         this.videoViewCallback = callback;
   
7.         fullScreenView.addView(videoViewContainer, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
   
8.         fullScreenView.setVisibility(View.VISIBLE);
   
9.         isVideoFullscreen = true;
   
10.     }
    
11. }
    
12. 
    
13. @Override
    
14. public void onHideCustomView() {
    
15.     if (isVideoFullscreen && fullScreenView != null) {
    
16.         // Hide the video view, remove it, and show the non-video view
    
17.         fullScreenView.setVisibility(View.INVISIBLE);
    
18.         fullScreenView.removeView(videoViewContainer);
    
19. 
    
20.         // Call back (only in API level <19, because in API level 19+ with chromium webview it crashes)
    
21.         if (videoViewCallback != null && !videoViewCallback.getClass().getName().contains(".chromium.")) {
    
22.             videoViewCallback.onCustomViewHidden();
    
23.         }
    
24. 
    
25.         isVideoFullscreen = false;
    
26.         videoViewContainer = null;
    
27.         videoViewCallback = null;
    
28.     }
    
29. }

复制代码

但是很多的手机版本在网页视频播放时是不会调用这个方法的，所以这个方法局限性很大。

Android5.0上 WebView中Http和Https混合问题

1. /**
   
2. * MIXED_CONTENT_ALWAYS_ALLOW：允许从任何来源加载内容，即使起源是不安全的；
   
3. * MIXED_CONTENT_NEVER_ALLOW：不允许Https加载Http的内容，即不允许从安全的起源去加载一个不安全的资源；
   
4. * MIXED_CONTENT_COMPATIBILITY_MODE：当涉及到混合式内容时，WebView 会尝试去兼容最新Web浏览器的风格。
   
5. **/
   
6. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   
7.      webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
   
8. }

复制代码

如何避免 WebView 的内存泄露问题

• 可以将 Webview 的 Activity 新起一个进程，结束的时候直接System.exit(0);退出当前进程；
• 不在xml中定义 WebView，而是在代码中创建，使用 getApplicationgContext() 作为传递的 Conetext；
• 在 Activity 销毁的时候，将 WebView 置空
  

1. @Override
   
2. protected void onDestroy() {
   
3. if (webView != null) {
   
4.      webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
   
5.      webView.clearHistory();
   
6.      ((ViewGroup) webView.getParent()).removeView(webView);
   
7.      webView.destroy();
   
8.      webView = null;
   
9. }
   
10. super.onDestroy();
    
11. }

复制代码

总结

如果你踩到了 WebView 上的坑，请先默哀一分钟，然后努力找找解决方法吧，总会有人体验过你的悲剧，也会有人重蹈你的覆辙。
当然 WebView 里肯定不止我上面列出来的这些问题，如果你有更多的 WebView 问题解决方案欢迎评论交流。

http://www.jianshu.com/p/fea5e829b30a