天天看点

android webView 的常见问题与高级用法

        这几天一直在研究webView控件的用法,现在就用这篇博客来记载一下webview控件的一些常用的用法,以及我们在开发中遇到的一些问题。废话少说直接进入正题。

一.webView 的介绍和用途

1.webView的介绍:在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装成名为WebView的组件,总之浏览器可以干的事,你都可以通过webview来实现。

二.webView 的一些基本用法

通过上面的介绍你可能对webview的一些常用的功能的用法有点疑惑,下面我们讲解一些在webview中的常用的用法。

1.加载一个网络的url

mWebView = (WebView) this.findViewById(R.id.mWebview);
	mWebView.loadUrl(url);
           

2.加载一个本地存放在assets文件下的html文件

mWebView = (WebView) this.findViewById(R.id.mWebview);
	webView.loadUrl("file:///android_asset/XX.html")
           

在这里我要特别说明一下:

当你在本地html文件中用到图片,js等的时候就要注意加载的方式,我在刚刚开始的时候也是通过上面的方法直接加载,结果都是失败的,在这里首先我们要在本地的html文件中配置img,js的方式要如:<img src="file:///android_asset/img/01.jpg"/>的格式,然后将整个html文件的内容获取,最后调用

wv_liebao.loadDataWithBaseURL("file:///android_asset/my.html",Str_html, "text/html", "utf-8", null);
           

其中第二个参数就是整个html的的String

3.Webview之WebSetting

1.webview允许加载js(详细用法后面介绍)

mWebView.getSettings().setJavaScriptEnabled(true);
           

2.webview 允许调用本地文件

mWebView.getSettings().setAllowFileAccess(true);
           

3.webview 自适应手机屏幕大小

wv_liebao.getSettings().setUseWideViewPort(true);
wv_liebao.getSettings().setLoadWithOverviewMode(true);
           

三.webView  的一些高级特性和用法

1.使用自己的 WebViewClient。

当我们要使用已经load进来的url的页面的一些特性的使用,一般会新建我们的WebViewClient,然后去调用里面的一些方法。

下面介绍一下其中比较重要和常见的方法

1.让我们的webView一直load一些url,屏蔽系统的浏览器

public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			mWebview.loadUrl(url);
			return true;
		}
           

2,当webView在加载网页的开始和结束时的回调方法

@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				// TODO Auto-generated method stub
				super.onPageStarted(view, url, favicon);
			}
	
			@Override
			public void onPageFinished(WebView view, String url) {
				// TODO Auto-generated method stub
				super.onPageFinished(view, url);
			}
           

3.当我们load网页是由于一些网络或服务器的原因没有load进来,我们可以用自己的网页来替代错误网页

@Override
			public void onReceivedError(WebView view, int errorCode,
					String description, String failingUrl) {
				// TODO Auto-generated method stub
				Message message = Message.obtain();
				message.what = Myconstants.ERROR_PAGE;
				handler.sendMessage(message);
			}
           

2.使用我们自己的WebChromeClient来处理那些网页上比较复杂的js, Javascript的对话框、网站图标、网站title、加载进度等。

@Override
		public void onReceivedTitle(WebView view, String title) {
			// TODO Auto-generated method stub
			super.onReceivedTitle(view, title);
		}

		@Override
		public boolean onJsAlert(WebView view, String url, String message,
				JsResult result) {
			// TODO Auto-generated method stub
			return super.onJsAlert(view, url, message, result);
		}

		@Override
		public boolean onJsConfirm(WebView view, String url, String message,
				JsResult result) {
			// TODO Auto-generated method stub
			return super.onJsConfirm(view, url, message, result);
		}
           

3.使用webView的一些高级特性来开发.

1.下载文件

在开发webView的时候我们可能会要下载一些文件,如果不作处理,那么就可能会直接调用系统的浏览器来进行下载,那该如何使用呢?

我们可以实现webView的DownloadListener接口

@Override
		public void onDownloadStart(String url, String userAgent,
				String contentDisposition, String mimetype, long contentLength) {
			// TODO Auto-generated method stub
		}
           

可以获取一个下载文件的url,然后我么自己再进行文件的下载

2.通过webView上传文件

我们在webVIew中处理网页上如<input />中的上传文件的标签,我们可以在WebChromeClient中重写打开文件的方法

// For Android3.0+
			public void openFileChooser(ValueCallback<Uri> uploadMsg,
					String acceptType) {
				if (mUploadMessage != null)
					return;
				mUploadMessage = uploadMsg;
				Intent innerIntent = new Intent(Intent.ACTION_GET_CONTENT);
				String IMAGE_UNSPECIFIED = "image/*";
				innerIntent.setType(IMAGE_UNSPECIFIED); // 查看类型
				Intent wrapperIntent = Intent.createChooser(innerIntent, null);
				startActivityForResult(wrapperIntent, Myconstants.REQ_CHOOSE);
		}
	
			// For Android < 3.0
			public void openFileChooser(ValueCallback<Uri> uploadMsg) {
				openFileChooser(uploadMsg, "");
			}
	
			// For Android > 4.1.1
			public void openFileChooser(ValueCallback<Uri> uploadMsg,
					String acceptType, String capture) {
				openFileChooser(uploadMsg, acceptType);
			}
           

然后再在onActivityResult中进行处理

@Override
		protected void onActivityResult(int requestCode, int resultCode,
				Intent intent) {
			super.onActivityResult(requestCode, resultCode, intent);
			if (null == mUploadMessage)
				return;
			Uri uri = null;
			if (requestCode == Myconstants.REQ_CHOOSE) {
				if (intent != null) {
					uri = afterChosePic(intent);
				}
			}
			mUploadMessage.onReceiveValue(uri);
			mUploadMessage = null;
		}
           

3长按webView保存网页上的图片等

首先我们可以重写webView的onlongclickListener,如下

wv_liebao.setOnLongClickListener(new OnLongClickListener() {
				@Override
				public boolean onLongClick(View v) {
					// TODO Auto-generated method stub
					HitTestResult hitTestResult = wv_liebao.getHitTestResult();
					int type = hitTestResult.getType();
					if (type == HitTestResult.IMAGE_TYPE
							|| type == HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
						String imageUrl = hitTestResult.getExtra();
						showSaveDialog(imageUrl);
					}
					return true;
				}
			});
           

上面的代码中我保存的是图片,我们可以通过 HitTestResult 这个类来实现,具体实现参考上面的代码。

4.webView 的cookie处理.

通常我们在开发webView的过程中可能会用到cookie,那么我们该如何处理呢?首先在android中我们有一个cookie store,当我们打开一个链接的时候,如果我们想要保存cookie留着后面使用,可以先保存cookie到store中,然后再同步一下store库,那么以后我们在打开连接的时候,我们的webView会先访问以下cookieStore库,看有没有cookie,然后在打开连接。

CookieSyncManager.createInstance(this);
			cookieManager = CookieManager.getInstance();
	cookieManager.setAcceptCookie(true);
	cookieManager.getCookie(url);
	cookieManager.setCookie(url, value);
	CookieSyncManager.getInstance().sync();
           

4.webView 实现网页 js 的交互

具体实现如下

mWebView.addJavascriptInterface(
	    new Object() { 
	            public void clickOnAndroid(final int i) { 
	                mHandler.post(new Runnable() { 
	                    public void run() { 
	                                int j = i;
	                                j++;
	Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
	                    }
	                });
	            } 
	        }, "demo");
	
	然后在html页面中,利用如下代码<div id='b'><a οnclick="window.demo.clickOnAndroid()">b.c</a></div>,即可实现调用记得两者的“demo”要保持一致
           

注意:上面的调用js代码在4.2以上没有作用,需要在调用之前标注:

@Javascriptinterface

这一句话。。