android與javascript交互

ID:140343 · 發(fā)表于 2016-9-25 11:04

Android與Javascript交互主要是使用的WebView。

關(guān)于WebView，一般涉及到2個(gè)類：WebChromeClient 和 WebViewClient 。
開發(fā)的大致流程為（摘自Android developer）：
A WebView has several customization points where you can add your own behavior. These are:
Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks).
Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).
Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().
Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.
好了，廢話不多說，上Demo。
此demo完成了Android與Javascript交互的基礎(chǔ)功能，并用json字符串進(jìn)行了值傳遞。
秉持一貫的風(fēng)格，知識(shí)內(nèi)容都在代碼注釋中，這樣方便以后復(fù)習(xí)。（布局就不貼了，比較簡(jiǎn)單）
整個(gè)工程結(jié)構(gòu)比較簡(jiǎn)單：

首先是這個(gè)jsdroid.html文件的界面（貼界面其實(shí)有點(diǎn)2 --�。�

html代碼比較簡(jiǎn)單：

[html] view plain copy
print?

<html>
<meta charset="GBK">
<head>
<title>js交互android</title>
<script type="text/javascript">
function show(){
var a = document.getElementById("text").value;
alert("警告，你輸入的是："+a);
}
function rfInfo(jsonStr) {
document.getElementById("info").innerHTML="從Android客戶端傳來的作者信息:"+jsonStr.Developer;
}
function cfm() {
if(confirm("確認(rèn)界面提示?")){
return true;
}else
return false;
}
function pmt() {
var place = prompt("請(qǐng)輸入位置?","");
}
</script>
</head>
<body>
<form action="">
<p><div id="info" >從Android客戶端傳來的作者信息:</div></p>
<p><input type="text" id="text" value="input your msg"/></p>
<p><div id="inputinfo" >輸入的信息:</div></p>
<p><input type="button" id="btn_alert" value="Alert"/></p>
<p><input type="button" id="btn_cfm" value="Confirm"/></p>
<p><input type="button" id="btn_pmt" value="Prompt"/></p>
<p><input type="button" id="btn_pmt" value="調(diào)用android方法"/></p>
</form>
</body>
</html>

其中，id為“btn_pmt”的button，監(jiān)聽器設(shè)置的是調(diào)用Android中的方法。

好了，上最重要的，android端實(shí)現(xiàn)的代碼。

[java] view plain copy
print?

package com.harlan.demo.activity;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
WebView webView;
Handler handler = new Handler();
Button btn;
final String jsonStr = "{\"Developer\":\"Harlan\",\"Place\":\"Nanjing\"}";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.myweb);
btn = (Button) findViewById(R.id.mybtn);
/*
* webSettings 保存著WebView中的狀態(tài)信息。
* 當(dāng)WebView第一次被創(chuàng)建時(shí)，webSetting中存儲(chǔ)的都為默認(rèn)值。
* WebSetting和WebView一一綁定的。
* 如果webView被銷毀了，那么我們?cè)俅握{(diào)用webSetting中的方法時(shí)，會(huì)拋出異常。
*/
WebSettings webSettings = webView.getSettings();
//允許在webview中執(zhí)行JavaScript代碼
webSettings.setJavaScriptEnabled(true);
//設(shè)置webview是否支持縮放
webSettings.setSupportZoom(false);
//加載本地html代碼，此代碼位于assets目錄下，通過file:///android_asset/jsdroid.html訪問。
webView.loadUrl("file:///android_asset/jsdroid.html");
/***
*webChromeClient主要是將javascript中相應(yīng)的方法翻譯成android本地方法
*
* 例如：我們重寫了onJsAlert方法，那么當(dāng)頁面中需要彈出alert窗口時(shí)，便
* 會(huì)執(zhí)行我們的代碼，按照我們的Toast的形式提示用戶。
*/
class HarlanWebChromeClient extends WebChromeClient {
/*此處覆蓋的是javascript中的alert方法。
*當(dāng)網(wǎng)頁需要彈出alert窗口時(shí)，會(huì)執(zhí)行onJsAlert中的方法
* 網(wǎng)頁自身的alert方法不會(huì)被調(diào)用。
*/
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
Toast.makeText(getApplicationContext(), message,
Toast.LENGTH_LONG).show();
Log.d(TAG, "彈出了提示框");
/*此處代碼非常重要，若沒有，android就不能與js繼續(xù)進(jìn)行交互了，
* 且第一次交互后，webview不再展示出來。
* result：A JsResult to confirm that the user hit enter.
* 我的理解是，confirm代表著此次交互執(zhí)行完畢。只有執(zhí)行完畢了，才可以進(jìn)行下一次交互。
*/
result.confirm();
return true;
}
/*此處覆蓋的是javascript中的confirm方法。
*當(dāng)網(wǎng)頁需要彈出confirm窗口時(shí)，會(huì)執(zhí)行onJsConfirm中的方法
* 網(wǎng)頁自身的confirm方法不會(huì)被調(diào)用。
*/
@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "彈出了確認(rèn)框");
result.confirm();
return true;
}
/*此處覆蓋的是javascript中的confirm方法。
*當(dāng)網(wǎng)頁需要彈出confirm窗口時(shí)，會(huì)執(zhí)行onJsConfirm中的方法
* 網(wǎng)頁自身的confirm方法不會(huì)被調(diào)用。
*/
@Override
public boolean onJsPrompt(WebView view, String url,
String message, String defaultValue,
JsPromptResult result) {
Log.d(TAG, "彈出了輸入框");
result.confirm();
return true;
}
/*
* 如果頁面被強(qiáng)制關(guān)閉,彈窗提示：是否確定離開？
* 點(diǎn)擊確定保存數(shù)據(jù)離開，點(diǎn)擊取消，停留在當(dāng)前頁面
*/
@Override
public boolean onJsBeforeUnload(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "彈出了離開確認(rèn)框");
result.confirm();
return true;
}
}
class HarlanWebViewClient extends WebViewClient{
/*點(diǎn)擊頁面的某條鏈接進(jìn)行跳轉(zhuǎn)的話，會(huì)啟動(dòng)系統(tǒng)的默認(rèn)瀏覽器進(jìn)行加載，調(diào)出了我們本身的應(yīng)用
* 因此，要在shouldOverrideUrlLoading方法中
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view,
String url) {
//使用當(dāng)前的WebView加載頁面
view.loadUrl(url);
return true ;
}
/*
* 網(wǎng)頁加載完畢(僅指主頁，不包括圖片)
*/
@Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 網(wǎng)頁加載完畢(僅指主頁，不包括圖片)
*/
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
/*
* 加載頁面資源
*/
@Override
public void onLoadResource(WebView view, String url) {
// TODO Auto-generated method stub
super.onLoadResource(view, url);
}
/*
* 錯(cuò)誤提示
*/
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
// TODO Auto-generated method stub
super.onReceivedError(view, errorCode, description, failingUrl);
}
};
webView.setWebChromeClient(new HarlanWebChromeClient());
webView.setWebViewClient(new HarlanWebViewClient());
/*
* 為js提供一個(gè)方法，注意該方法一般不寫在UI線程中
* addJavascriptInterface(Object obj, String interfaceName)
* obj代表一個(gè)java對(duì)象，這里我們一般會(huì)實(shí)現(xiàn)一個(gè)自己的類，類里面提供我們要提供給javascript訪問的方法
* interfaceName則是訪問我們?cè)趏bj中聲明的方法時(shí)候所用到的js對(duì)象，調(diào)用方法為window.interfaceName.方法名()
*/
webView.addJavascriptInterface(new Object() {
@SuppressWarnings("unused")
public void adrdMethod() {
handler.post(new Runnable() {
@Override
public void run() {
Log.d(TAG, "js調(diào)用了Android方法");
}
});
}
}, "demo");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(TAG, "Android調(diào)用了js方法");
/*
* 通過webView.loadUrl("javascript:xxx")方式就可以調(diào)用當(dāng)前網(wǎng)頁中的名稱
* 為xxx的javascript方法
*/
webView.loadUrl("javascript:rfInfo("+jsonStr+")");
}
});
}
}

這只是粗略地學(xué)習(xí)了下android和Javascript的交互，后面的，還需要繼續(xù)深入研究下。

最終在手機(jī)上跑的效果圖：

Demo的下載地址：
http://download.csdn.net/detail/singleton1900/5238800

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)

android與javascript交互

相關(guān)帖子

瀏覽過的版塊