Android学习13-----网络通信(4) WebView组件
WebView是一个开发的浏览器组件，是基于WebKit内核开发出来的，如Safari、Google Chrome浏览器都是通过WebView实现的，而在Android系统中，默认提供了WebView组件的支持。除了支持各个浏览器的“前进”、“后退”等功能之外，最为强大的是在WebView组件之中也支持JavaScript的操作。
一、加载网页
要想使用WebView加载网页，最简单的方法就是使用loadUrl()方法，此方法只需要输入网页的URL地址即可。下面涉及网络访问的需要加载网络访问权限，这里不一一说了。
main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal" android:layout_width="fill_parent"android:layout_height="wrap_content"><Buttonandroid:id="@+id/open"android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="打开" /><EditTextandroid:id="@+id/inputurl"android:layout_width="fill_parent"android:layout_height="wrap_content" android:text="http://www.baidu.com" /></LinearLayout><WebViewandroid:id="@+id/webview"android:layout_width="fill_parent"android:layout_height="fill_parent"/></LinearLayout>WebView01_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebView;import android.widget.Button;import android.widget.EditText;public class WebView01_Activity extends Activity {private Button openBtn = null;private EditText inputurl = null;private WebView webview = null;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);this.openBtn = (Button) super.findViewById(R.id.open);this.inputurl = (EditText) super.findViewById(R.id.inputurl);this.webview = (WebView) super.findViewById(R.id.webview);this.openBtn.setOnClickListener(new OpenOnClickListenerImpl());}private class OpenOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {String url = WebView01_Activity.this.inputurl.getText().toString();WebView01_Activity.this.webview.loadUrl(url);// 加载页面}}}上面也可以将字符串中定义的HTML标记变为网页，在WebView中显示。
Main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent"><WebViewandroid:id="@+id/webview"android:layout_width="fill_parent"android:layout_height="fill_parent"/> </LinearLayout>WebView02_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class WebView02_Activity extends Activity {private WebView webview = null;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);this.webview = (WebView) super.findViewById(R.id.webview);String data = "<h1>this.is baidu.</h1>"+ "<h2><a href=\"http://www.baidu.com\">BAIDU</a><h2>";this.webview.loadData(data, "text/html", "UTF-8");}}
二、控制WebView，实现属于自己的浏览器
Main.xml
<?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" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/open" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="打开" /> <Button android:id="@+id/back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="后退" /> <Button android:id="@+id/forward" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="前进" /> <Button android:id="@+id/zoomout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="缩小" /> <Button android:id="@+id/zoomin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="放大" /> <Button android:id="@+id/clear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="清空" /> </LinearLayout> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout>WebView02_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.app.AlertDialog;import android.app.Dialog;import android.content.DialogInterface;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebView;import android.widget.Button;public class WebView02_Activity extends Activity {private Button openBtn = null;private Button backBtn = null;private Button forwardBtn = null;private Button zoominBtn = null;private Button zoomoutBtn = null;private Button clearBtn = null;private WebView webview = null;private String urlData[] = new String[] { "http://www.baidu.com","http://www.iteye.com", "http://www.eoeandroid.com/","http://blog.jobbole.com/", "http://www.cnblogs.com/" };/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);this.webview = (WebView) super.findViewById(R.id.webview);this.openBtn = (Button) super.findViewById(R.id.open);this.backBtn = (Button) super.findViewById(R.id.back);this.forwardBtn = (Button) super.findViewById(R.id.forward);this.zoominBtn = (Button) super.findViewById(R.id.zoomin);this.zoomoutBtn = (Button) super.findViewById(R.id.zoomout);this.clearBtn = (Button) super.findViewById(R.id.clear);this.openBtn.setOnClickListener(new OpenOnClickListenerImpl());this.backBtn.setOnClickListener(new BackOnClickListenerImpl());this.forwardBtn.setOnClickListener(new ForwardOnClickListenerImpl());this.zoominBtn.setOnClickListener(new ZoomInOnClickListenerImpl());this.zoomoutBtn.setOnClickListener(new ZoomOutClickListenerImpl());this.clearBtn.setOnClickListener(new ClearOnClickListenerImpl());}private class OpenOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {WebView02_Activity.this.showUrlDialog();}}private class BackOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {if (WebView02_Activity.this.webview.canGoBack()) {WebView02_Activity.this.webview.goBack();}}}private class ForwardOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {if (WebView02_Activity.this.webview.canGoForward()) {WebView02_Activity.this.webview.goForward();}}}private class ZoomInOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {WebView02_Activity.this.webview.zoomIn();}}private class ZoomOutClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {WebView02_Activity.this.webview.zoomOut();}}private class ClearOnClickListenerImpl implements OnClickListener {@Overridepublic void onClick(View v) {WebView02_Activity.this.webview.clearHistory();}}private void showUrlDialog() {Dialog dialog = new AlertDialog.Builder(this).setIcon(R.drawable.ic_launcher).setTitle("请选择要浏览的网站").setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {}}).setItems(this.urlData, new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {webview.loadUrl(urlData);}}).create();dialog.show();}}
三、通过HTML定义显示界面
在前面我们使用WebView组件浏览的是Web站点，而实际上，也可以通过WebView组件加载项目中的HTML页面，以达到界面显示的操作，但是在进行这些操作之前，首先必须了解android.webkit.WebSettings类，此类的主要功能是进行WebView的操作设置，用户可以通过WebView类中的getSettings()方法取得WebSettings类的对象，该对象常用方法如下：
No.
方法
描述
1
Public void setBuitInZoomControls(Booleanenabled)
设置是否可以进行缩放控制
2
Public synchronized voidsetJavaScriptEnabled(Boolean falg)
设置是否启动JavaScript支持
3
Public void setSaveFormData(Boolean save)
设置是否保存表单数据
4
Public void setSavePassword(Boolean save)
设置是否保存密码
5
Public synchronized voidsetGeolocationEnabled(Boolean flag)
设置是否可以获取地理位置
要通过HTML设置显示界面，则还涉及HTML文件的保存问题，此时用户可以将文件保存在Android项目的assets文件夹下的html文件夹。
下面定义包含JS的HTML文件 assests/html/show_htmlinjs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script language="javascript">function openurl(url) {window.location = url;}</script></head><body><center><img src="../images/java.jpg" width="150" height="220"><h3>请选择您要浏览的网站：</h3><select name="url" onchange="openurl(this.value)"><option value="http://www.baidu.com">BaiDu</option><option value="http://www.iteye.com">Iteye</option><option value="http://www.google.com">Googlg</option></select></center></body></html>WebView03_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class WebView03_Activity extends Activity {private WebView webview = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.webview = (WebView) super.findViewById(R.id.webview);this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScriptthis.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放this.webview.loadUrl("file:/android_asset/html/show_htmlinjs.html"); }}
四、本地程序与JavaScript互操作
使用WebView还可以专门处理JavaScript返回的警告框、确认框等互操作，此时就需要使用android.webkit.WebChromeClient客户端处理的操作类完成。其常用方法：
No.
方法
描述
1
Public void onCloseWindow(WebView window)
窗口关闭操作
2
Public Boolean onCreateWindow(WebViewview,Boolean dialog,Boolean userGesture,Message resultMsg)
创建新的WebView
3
Public Boolean onJsAlert(WebView viewString url,String message,JsResult result)
弹出警告框互操作
4
Public Boolean onJsBeforeUnload(WebViewview,String url,String message,JsResult result)
页面关闭互操作
5
Public Boolean onJsConfirm(WebViewview,String url,String message,JsResult result)
弹出确认框互操作
6
Public Boolean onJsPrompt(WebViewview,String url,String message,String defaultValue,JsPromptResult result)
弹出提示框互操作
7
Public Boolean onJsTimeout()
计时器已到互操作
8
Public void onProgressChanged(WebViewview,int newProgress)
进度改变互操作
9
Public void onReceivedTitle(WebViewview,String title)
接收页面标题互操作
定义HTML界面show_js.html
<head><title>Iteye：www.iteye.com</title><meta http-equiv="Content-Type" content="text/html;charset=GBK"><script language="javascript">function openAlert(){window.alert("Iteye：\nwww.iteye.com") ;}function openConfirm(){if (window.confirm("是否删除此信息？")) {window.location = "delete_js.html" ;}}</script></head><input type="button" value="弹出警告框" ><input type="button" value="弹出确认框" >delete_js.html
<head><title>Iteye：www.iteye.com</title><meta http-equiv="Content-Type" content="text/html;charset=GBK"></head><h1>信息已删除！</h1>WebView04_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.app.AlertDialog;import android.app.Dialog;import android.content.DialogInterface;import android.os.Bundle;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.widget.Toast;public class WebView04_Activity extends Activity {private WebView webview = null;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);this.webview = (WebView) super.findViewById(R.id.webview);this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScriptthis.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放this.webview.setWebChromeClient(new WebChromeClientImpl());//接受客户端操作this.webview.loadUrl("file:/android_asset/html/show_js.html");//读取网页}private class WebChromeClientImpl extends WebChromeClient {@Overridepublic boolean onJsAlert(WebView view, String url, String message,final JsResult result) {Dialog dialog = new AlertDialog.Builder(WebView04_Activity.this).setIcon(R.drawable.ic_launcher).setTitle("Xdwang警告").setMessage(message).setPositiveButton(android.R.string.ok,new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {Toast.makeText(WebView04_Activity.this,"关闭警告框", Toast.LENGTH_SHORT).show();result.cancel();}}).create();dialog.show();return true;}@Overridepublic boolean onJsConfirm(WebView view, String url, String message,final JsResult result) {Dialog dialog = new AlertDialog.Builder(WebView04_Activity.this).setIcon(R.drawable.ic_launcher).setTitle("确定删除？").setMessage(message).setPositiveButton("删除",new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {Toast.makeText(WebView04_Activity.this,"确定删除", Toast.LENGTH_SHORT).show();result.confirm();}}).setNegativeButton("取消",new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {Toast.makeText(WebView04_Activity.this,"取消删除", Toast.LENGTH_SHORT).show();result.cancel();}}).create();dialog.show();return true;}@Overridepublic void onReceivedTitle(WebView view, String title) {WebView04_Activity.this.setTitle(title);super.onReceivedTitle(view, title);}}}
五、使用JavaScript调用Android
前面我们说了如何通过Android调用JavaScript的操作，反过来，JavaScript程序也可以调用Android成词，此时就必须依靠WebView中的addJavaScriptInterface()方法完成，定义如下：
Public void addJavaScriptInterface(Object 操作对象,String 标记名称)
在此方法中，用户需要一个标记的名称，而该标记名称的主要功能就是绑定HTML与android间的联络标记
WebView05_Activity.java
package com.iflytek.demo;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class WebView05_Activity extends Activity {private WebView webview = null;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);this.webview = (WebView) super.findViewById(R.id.webview);this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScriptthis.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放this.webview.addJavascriptInterface(this, "xdwangandroid");this.webview.loadUrl("file:/android_asset/html/show_js.html");}public String getContent() {return "ITEYE:www.iteye.com";}}show_js.html
<head><title>Iteye：www.iteye.com</title><meta http-equiv="Content-Type" content="text/html ; charset=GBK"></head><h1><span id="msg">等待接收信息...</span></h1><script language="javascript">document.getElementById("msg").innerHTML = window.xdwangandroid.getContent();</script>
页:
[1]