16_android_WebView與Javascript的(de)交互
發表時(shí)間：2020-10-19
發布人(rén)：融晨科技
浏覽次數：36
在(zài)WebView中不(bù)僅可以(yǐ)運行HTML代碼，更重要(yào / yāo)的(de)是(shì)，WebView可以(yǐ)與Javascript互相調用。也(yě)就(jiù)是(shì)說(shuō)，在(zài)Javascript中可以(yǐ)獲取WebView的(de)内容，與此同時(shí)，在(zài)WebView中也(yě)可聲調用Javascript琅绫擎的(de)辦法。
下面經由過程如下案例來(lái)分析WebView與javascript的(de)交互
1.第一步在(zài)構造文件中聲明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.在(zài)項目标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){
//經由過程eval函數 轉化成 josn對象
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);
//設置列内容和(hé / huò)屬性
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");
}
//确認框
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%">序号</td><td align="center">姓名</td><td width="20%">德律風</td>
</tr>
</table>
<div>
<input type="button" onclick="javascript:alertMsg()" value="彈出(chū)警告框"/>
<input type="button" onclick="javascript:confirmMsg()" value="确認框"/>
<input type="button" onclick="javascript:promptMsg()" value="提示框"/>
</div>
</body>
</html>
備注:爲(wéi / wèi)了(le／liǎo)讓WebView大(dà)年夜apk文件中加載 assets，Android SDK供給了(le／liǎo)一個(gè)schema，前綴爲(wéi / wèi)"file:///android_asset/"。WebView碰到(dào)如許的(de)schema，就(jiù)去當前包中的(de) assets目次中找内容
3.具體代碼的(de)實現(詳解見代碼注釋)
public class MainActivity extends Activity {
// 聲明控件對象
private WebView webView;
// 聲明handler對象
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 獲取控件對象
webView = (WebView) findViewById(R.id.webView1);
// 獲取webview控件屬性對象
WebSettings webSettings = webView.getSettings();
// 支撐javascript代碼
webSettings.setJavaScriptEnabled(true);
// 添加javascript接口對象
webView.addJavascriptInterface(new JavascriptUser(), "csdn");
// WebChromeClient重要(yào / yāo)用來(lái)幫助WebView處理Javascript的(de)對話框、網站擱筆、網站标題以(yǐ)及網頁加載進度等。
webView.setWebChromeClient(new WebChromeClient() {
//處理确認框
@Override
public boolean onJsConfirm(WebView view, String url,
String message, final JsResult result) {
// 創建builder對象
new AlertDialog.Builder(MainActivity.this)
.setTitle("onJsConfirm").setMessage(message)
.setPositiveButton("确認", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog,
int which) {
result.cancel();//如不(bù)雅不(bù)撤消,按鈕隻能處理一次，撤消後不(bù)限制
}
}).show();
return true;
}
//處理提示框
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, final JsPromptResult result) {
// 創建builder對象
new AlertDialog.Builder(MainActivity.this)
.setTitle("onJsPrompt").setMessage(message)
.setPositiveButton("确認", 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(); //确認後，可以(yǐ)處理多次點擊，不(bù)然按鈕隻能點擊一次
*/
// 創建builder對象
new AlertDialog.Builder(MainActivity.this)
.setTitle("onJsAlert").setMessage(message)
.setPositiveButton("确認", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog,
int which) {
result.cancel();
}
}).show();
return true;
}
});
// 加載顯示的(de)網頁 規定：schema file:///android_asset
webView.loadUrl("file:///android_asset/user.html");
}
class JavascriptUser {
// 打德律風 備注：在(zài)android17版本之(zhī)後必須經由過程 @JavascriptInterface 注解實現,不(bù)然會出(chū)現bug(詳見異常)
//這(zhè)個(gè)辦法是(shì)在(zài)網頁中調用的(de)：<a href='javascript:csdn.call("+jsonobjs[y].phone+")'>"+ jsonobjs[y].name + "</a>
@JavascriptInterface
public void call(final String phone) {
//處理的(de)操作要(yào / yāo)在(zài)hanlder中處理
handler.post(new Runnable() {
@Override
public void run() {
//這(zhè)裏要(yào / yāo)實現打德律風的(de)操作，必須添加打德律風的(de)權限 <uses-permission android:name="android.permission.CALL_PHONE"/>
startActivity(new Intent(Intent.ACTION_CALL, Uri
.parse("tel:" + phone)));
}
});
}
//加載所有的(de)數據 備注：在(zài)android 17版本之(zhī)後必須經由過程 @JavascriptInterface 注解實現,
//不(bù)然會出(chū)現"Uncaught TypeError: Object [object Object] has no method 'userList'",
//source: file:///android_asset/user.html (31)
//這(zhè)個(gè)辦法是(shì)在(zài)網頁中調用的(de)onload="javascript:csdn.userList()"
@JavascriptInterface
public void userList() {
handler.post(new Runnable() {
@Override
public void run() {
try {
// 創建json對象
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", 1);
jsonObject.put("name", "chenhj");
jsonObject.put("phone", "110");
// 創建json對象
JSONObject jsonObject2 = new JSONObject();
jsonObject2.put("id", 2);
jsonObject2.put("name", "wangsan");
jsonObject2.put("phone", "112");
// 創建json數組
JSONArray jsonArray = new JSONArray();
jsonArray.put(jsonObject);
jsonArray.put(jsonObject2);
// 把json數組轉換成字符串
String jsonstr = jsonArray.toString();
// TODO Auto-generated method stub
// 調用網頁中的(de)javascript中的(de)show函數
webView.loadUrl("javascript:show('" + jsonstr + "')");
} catch (JSONException e) {
e.printStackTrace();
}
}
});
}
}
}
4.運行效不(bù)雅圖解釋：
4.1當成功安排,啓動後的(de)界面如下(備注：網頁中調用的(de)onload="javascript:csdn.userList()" 與java代碼中調用了(le／liǎ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當點擊用戶名比如chj時(shí) 會進入到(dào)撥号角面;解釋成功調用了(le／liǎo)java中的(de)call辦法
[img]http://img.blog.csdn.net/20150105152034170?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.3當點擊彈出(chū)警告框 按鈕時(shí) 會出(chū)現如下界面;解釋成功調用了(le／liǎo)WebChromeClient子(zǐ)類中重寫的(de)onJsAlert
[img]http://img.blog.csdn.net/20150105152043375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.4當點擊 确認框 按鈕時(shí) 會出(chū)現如下界面；解釋成功調用了(le／liǎo)WebChromeClient子(zǐ)類中重寫的(de)onJsConfirm
[img]http://img.blog.csdn.net/20150105152152981?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
4.5當點擊提示框 按鈕 會出(chū)現如下界面;解釋成功調用了(le／liǎo)WebChromeClient子(zǐ)類中重寫的(de)onJsPrompt
[img]http://img.blog.csdn.net/20150105152222512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmVkYXJteV9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
備注：關于(yú)WebChromeClient常用辦法：
onCloseWindow 封閉WebView onCreateWindow 創建WebView onJsAlert 處理Javascript中的(de)Alert對話框 onJsConfirm處理Javascript中的(de)Confirm對話框 onJsPrompt處理Javascript中的(de)Prompt對話框 onProgressChanged 加載進度條改變 onReceivedlcon 網頁擱筆更改 onReceivedTitle 網頁Title更改 onRequestFocus WebView顯示核心
