16_android_WebView與Javascript的交互

發(fā)表時(shí)間：2020-10-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：36

在WebView中不僅可以運(yùn)行HTML代碼，更重要的是，WebView可以與Javascript互相調(diào)用。也就是說，在Javascript中可以獲取WebView的內(nèi)容，與此同時(shí)，在WebView中也可聲調(diào)用Javascript瑯綾擎的辦法。
下面經(jīng)由過程如下案例來分析WebView與javascript的交互
1.第一步在構(gòu)造文件中聲明WebView(activity_main.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

2.在項(xiàng)目標(biāo)assets目次下面存放html文件(user.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">  
	function show(jsondata){
	    //經(jīng)由過程eval函數(shù) 轉(zhuǎn)化成 josn對(duì)象
		var jsonobjs = eval(jsondata);
		var table = document.getElementById("user");
		for(var y=0; y<jsonobjs.length; y++){
	        var tr = table.insertRow(table.rows.length); //添加一行
	        //添加三列
	        var td1 = tr.insertCell(0);
	        var td2 = tr.insertCell(1);
	        td2.align = "center";
	        var td3 = tr.insertCell(2);
	        //設(shè)置列內(nèi)容和屬性
	        td1.innerHTML = jsonobjs[y].id; 
	        td2.innerHTML = "<a href='javascript:csdn.call("+jsonobjs[y].phone+")'>"+ jsonobjs[y].name + "</a>"; 
	        td3.innerHTML = jsonobjs[y].phone;
		}
	}
	//警告框
	function alertMsg(){
	   alert("hello alert");
	}
	//確認(rèn)框
	function confirmMsg(){
	    confirm("hello confirm");
	}
	//提示框
	function promptMsg(){
	    prompt("hello prompt");
	} 
	
</script>
</head>
<body onload="javascript:csdn.userList()">
	<table border="0" width="100%" id="user">
		<tr>
			<td width="20%">序號(hào)</td><td align="center">姓名</td><td width="20%">德律風(fēng)</td>
		</tr>
	</table>
	
	<div>
	  <input type="button" onclick="javascript:alertMsg()" value="彈出警告框"/>
	  <input type="button" onclick="javascript:confirmMsg()" value="確認(rèn)框"/>
	  <input type="button" onclick="javascript:promptMsg()" value="提示框"/>
	</div>
</body>
</html>

備注:為了讓W(xué)ebView大年夜apk文件中加載 assets，Android SDK供給了一個(gè)schema，前綴為"file:///android_asset/"。WebView碰到如許的schema，就去當(dāng)前包中的 assets目次中找內(nèi)容
3.具體代碼的實(shí)現(xiàn)(詳解見代碼注釋)

public class MainActivity extends Activity {
	// 聲明控件對(duì)象
	private WebView webView;
	// 聲明handler對(duì)象
	private Handler handler = new Handler();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 獲取控件對(duì)象
		webView = (WebView) findViewById(R.id.webView1);
		// 獲取webview控件屬性對(duì)象
		WebSettings webSettings = webView.getSettings();
		// 支撐javascript代碼
		webSettings.setJavaScriptEnabled(true);
		// 添加javascript接口對(duì)象
		webView.addJavascriptInterface(new JavascriptUser(), "csdn");

		// WebChromeClient重要用來幫助WebView處理Javascript的對(duì)話框、網(wǎng)站擱筆、網(wǎng)站標(biāo)題以及網(wǎng)頁(yè)加載進(jìn)度等。
		webView.setWebChromeClient(new WebChromeClient() {
			//處理確認(rèn)框
			@Override
			public boolean onJsConfirm(WebView view, String url,
					String message, final JsResult result) {
				// 創(chuàng)建builder對(duì)象
				new AlertDialog.Builder(MainActivity.this)
						.setTitle("onJsConfirm").setMessage(message)
						.setPositiveButton("確認(rèn)", new OnClickListener() {
							@Override
							public void onClick(DialogInterface dialog,
									int which) {
								result.cancel();//如不雅不撤消,按鈕只能處理一次，撤消后不限制
							}

						}).show();

				return true;
			}
			//處理提示框
			@Override
			public boolean onJsPrompt(WebView view, String url, String message,
					String defaultValue, final JsPromptResult result) {
				// 創(chuàng)建builder對(duì)象
				new AlertDialog.Builder(MainActivity.this)
						.setTitle("onJsPrompt").setMessage(message)
						.setPositiveButton("確認(rèn)", new OnClickListener() {

							@Override
							public void onClick(DialogInterface dialog,
									int which) {
								result.cancel();
							}

						}).show();

				return true;
			}

			//處理警告框
			@Override
			public boolean onJsAlert(WebView view, String url, String message,
					final JsResult result) {
				/*
				 * Toast.makeText(MainActivity.this, message, 1).show();
				 * 
				 * result.confirm(); //確認(rèn)后，可以處理多次點(diǎn)擊，不然按鈕只能點(diǎn)擊一次
				 */
				// 創(chuàng)建builder對(duì)象
				new AlertDialog.Builder(MainActivity.this)
						.setTitle("onJsAlert").setMessage(message)
						.setPositiveButton("確認(rèn)", new OnClickListener() {
							@Override
							public void onClick(DialogInterface dialog,
									int which) {
								result.cancel();
							}

						}).show();

				return true;
			}

		});

		// 加載顯示的網(wǎng)頁(yè) 規(guī)定：schema file:///android_asset
		webView.loadUrl("file:///android_asset/user.html");
	}

	class JavascriptUser {
		// 打德律風(fēng)   備注：在android17版本之后必須經(jīng)由過程 @JavascriptInterface 注解實(shí)現(xiàn),不然會(huì)出現(xiàn)bug(詳見異常)
		//這個(gè)辦法是在網(wǎng)頁(yè)中調(diào)用的：<a href='javascript:csdn.call("+jsonobjs[y].phone+")'>"+ jsonobjs[y].name + "</a>
		@JavascriptInterface
		public void call(final String phone) {
			//處理的操作要在hanlder中處理
			handler.post(new Runnable() {
				@Override
				public void run() {
					//這里要實(shí)現(xiàn)打德律風(fēng)的操作，必須添加打德律風(fēng)的權(quán)限 <uses-permission android:name="android.permission.CALL_PHONE"/>
					startActivity(new Intent(Intent.ACTION_CALL, Uri
							.parse("tel:" + phone)));
				}
			});

		}

		//加載所有的數(shù)據(jù)   備注：在android 17版本之后必須經(jīng)由過程 @JavascriptInterface 注解實(shí)現(xiàn),
		//不然會(huì)出現(xiàn)"Uncaught TypeError: Object [object Object] has no method 'userList'", 
		//source: file:///android_asset/user.html (31)  
		//這個(gè)辦法是在網(wǎng)頁(yè)中調(diào)用的onload="javascript:csdn.userList()"
		@JavascriptInterface
		public void userList() {
			handler.post(new Runnable() {
				@Override
				public void run() {
					try {
						// 創(chuàng)建json對(duì)象
						JSONObject jsonObject = new JSONObject();
						jsonObject.put("id", 1);
						jsonObject.put("name", "chenhj");
						jsonObject.put("phone", "110");
						// 創(chuàng)建json對(duì)象
						JSONObject jsonObject2 = new JSONObject();
						jsonObject2.put("id", 2);
						jsonObject2.put("name", "wangsan");
						jsonObject2.put("phone", "112");
						// 創(chuàng)建json數(shù)組
						JSONArray jsonArray = new JSONArray();
						jsonArray.put(jsonObject);
						jsonArray.put(jsonObject2);
						// 把json數(shù)組轉(zhuǎn)換成字符串
						String jsonstr = jsonArray.toString();
						// TODO Auto-generated method stub
						// 調(diào)用網(wǎng)頁(yè)中的javascript中的show函數(shù)
						webView.loadUrl("javascript:show('" + jsonstr + "')");

					} catch (JSONException e) {
						e.printStackTrace();
					}

				}
			});

		}
	}
}

4.運(yùn)行效不雅圖解釋：
4.1當(dāng)成功安排,啟動(dòng)后的界面如下(備注：網(wǎng)頁(yè)中調(diào)用的onload="javascript:csdn.userList()" 與java代碼中調(diào)用了webView.loadUrl("javascript:show('" + jsonstr + "')");
[img]http://img.blog.csdn.net/20150105151758984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.2當(dāng)點(diǎn)擊用戶名比如chj時(shí) 會(huì)進(jìn)入到撥號(hào)角面;解釋成功調(diào)用了java中的call辦法
[img]http://img.blog.csdn.net/20150105152034170?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.3當(dāng)點(diǎn)擊彈出警告框按鈕時(shí) 會(huì)出現(xiàn)如下界面;解釋成功調(diào)用了WebChromeClient子類中重寫的onJsAlert
[img]http://img.blog.csdn.net/20150105152043375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.4當(dāng)點(diǎn)擊確認(rèn)框按鈕時(shí) 會(huì)出現(xiàn)如下界面；解釋成功調(diào)用了WebChromeClient子類中重寫的onJsConfirm

[img]http://img.blog.csdn.net/20150105152152981?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

4.5當(dāng)點(diǎn)擊提示框按鈕會(huì)出現(xiàn)如下界面;解釋成功調(diào)用了WebChromeClient子類中重寫的onJsPrompt
[img]http://img.blog.csdn.net/20150105152222512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

備注：關(guān)于WebChromeClient常用辦法：

onCloseWindow 封閉WebView
onCreateWindow 創(chuàng)建WebView
onJsAlert 處理Javascript中的Alert對(duì)話框
onJsConfirm處理Javascript中的Confirm對(duì)話框
onJsPrompt處理Javascript中的Prompt對(duì)話框
onProgressChanged 加載進(jìn)度條改變
onReceivedlcon 網(wǎng)頁(yè)擱筆更改
onReceivedTitle 網(wǎng)頁(yè)Title更改
onRequestFocus WebView顯示核心