Android开发中对WebView的简单使用

/**
* 先讲讲WebView常常要使用到的WebViewClient和WebChromeClient的区别：
* WebViewClient主要帮助WebView处理各种通知、请求事件的，比如： onLoadResource，onPageStart，onPageFinish，onReceiveError，onReceivedHttpAuthRequest等
* WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如：onCloseWindow(关闭WebView)，onCreateWindow()，
* onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)，onJsPrompt，onJsConfirm，onProgressChanged，onReceivedIcon，onReceivedTitle等
* 如果WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
* 通常情况下您可以进行如下操作就可以了：
WebView webView;
webView= (WebView) findViewById(R.id.webview);//找到布局中的WebView控件
webView.setWebChromeClient(new WebChromeClient());//使用默认的WebChromeClient
webView.setWebViewClient(new WebViewClient());//使用默认的WebViewClient
webView.getSettings().setJavaScriptEnabled(true);//设置可以与js交互
webView.loadUrl(url);
*/
public class WebViewTestActivity extends Activity {
/**WebView浏览器 */
private WebView mWebView;
/**进度条,增加用户体验度 */
private ProgressDialog pdialog;


/**重写返回按钮操作 */
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
/**条件是：点击返回按钮并且当前页面可以返回*/
if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}


@SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview_main);
mWebView = (WebView) findViewById(R.id.test_webview);
/**设置编码格式*/
mWebView.getSettings().setDefaultTextEncodingName("UTF-8");
/**设置为js可用*/
mWebView.getSettings().setJavaScriptEnabled(true);
/**滚动样式为无滚动条*/
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
setListeners();
showResults();
}


/**设置相应的监听 */
private void setListeners() {
/**设置url跳转到webview*/
mWebView.setWebViewClient(new TestWebViewClient());
/**js代码处理*/
mWebView.setWebChromeClient(new TestWebChromClient());
/**实现html与android交互*/
mWebView.addJavascriptInterface(new ItestJs(), "aMe");
}


/**加载显示结果 */
private void showResults() {
pdialog = new ProgressDialog(this);
mWebView.loadUrl("file:///android_asset/test_webview.html");
}


/**显示弹出对话框 */
private void showAlertResult(String message) {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("弹出对话框");
builder.setMessage(message);
builder.show();
}


/**对url跳转进行处理 */
final class TestWebViewClient extends WebViewClient {


@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
pdialog = ProgressDialog.show(WebViewTestActivity.this, null, "正在加载...");
super.onPageStarted(view, url, favicon);
}


/**加载结束，关闭进度框*/
@Override
public void onPageFinished(WebView view, String url) {
pdialog.dismiss();
super.onPageFinished(view, url);
}


@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {


super.onReceivedError(view, errorCode, description, failingUrl);
}


}


/**处理javascript*/
final class TestWebChromClient extends WebChromeClient {


@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
super.onJsAlert(view, url, message, result);
if (!message.equals("")) {
showAlertResult(message);
result.cancel();
return true;
}
return super.onJsAlert(view, url, message, result);
}


@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}


@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
return super.onJsPrompt(view, url, message, defaultValue, result);
}


}


/**实现web与android交互 */
final class ItestJs {


private Handler handler = new Handler();
private int flag = 0;


public void onClick() {
handler.post(new Runnable() {
@Override
public void run() {
if (flag == 0) {
mWebView.loadUrl("javascript：changeImage01()");
flag = 1;
} else {
mWebView.loadUrl("javascript：changeImage02()");
flag = 0;
}
}
});
}
}

}

----------------------------------------------------对上面使用的一些资源的说明-------------------------------

在项目的assets目录下放有以下文件：

test_webview.js:

function exchangeImage02() {
document.getElementById("image").src="wv01.jpg";
window.aMe.logout("Changed wv01.jpg")
}
function exchangeImage01() {
document.getElementById("image").src="wv02.jpg";
window.aMe.logout("Changed wv02.jpg")
}

代码目的很简单，就是实现图片图片切换，图片w01.jpg与w02.jpg也是放在assets目录下的

另外还放在一个web_view_test_html文件,里面代码很简单，就是对test_webview.js的调用及一些简单的文字说明。

代码mWebView.addJavascriptInterface(new ItestJs(), "aMe");中参数“aMe“就是js文件中的window.aMe方法。