android與javascript交互

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

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

關(guān)于WebView，一般涉及到2個(gè)類(lèi)：WebChromeClient 和 WebViewClient 。
開(kāi)發(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.
好了，廢話(huà)不多說(shuō)，上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客戶(hù)端傳來(lái)的作者信息:"+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客戶(hù)端傳來(lái)的作者信息:</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)聽(tīng)器設(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被銷(xiāo)毀了，那么我們?cè)俅握{(diào)用webSetting中的方法時(shí)，會(huì)拋出異常。
*/
WebSettings webSettings = webView.getSettings();
//允許在webview中執(zhí)行JavaScript代碼
webSettings.setJavaScriptEnabled(true);
//設(shè)置webview是否支持縮放
webSettings.setSupportZoom(false);
//加載本地html代碼，此代碼位于assets目錄下，通過(guò)file:///android_asset/jsdroid.html訪(fǎng)問(wèn)。
webView.loadUrl("file:///android_asset/jsdroid.html");
/***
*webChromeClient主要是將javascript中相應(yīng)的方法翻譯成android本地方法
*
* 例如：我們重寫(xiě)了onJsAlert方法，那么當(dāng)頁(yè)面中需要彈出alert窗口時(shí)，便
* 會(huì)執(zhí)行我們的代碼，按照我們的Toast的形式提示用戶(hù)。
*/
class HarlanWebChromeClient extends WebChromeClient {
/*此處覆蓋的是javascript中的alert方法。
*當(dāng)網(wǎng)頁(yè)需要彈出alert窗口時(shí)，會(huì)執(zhí)行onJsAlert中的方法
* 網(wǎng)頁(yè)自身的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, "彈出了提示框");
/*此處代碼非常重要，若沒(méi)有，android就不能與js繼續(xù)進(jìn)行交互了，
* 且第一次交互后，webview不再展示出來(lái)。
* 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)頁(yè)需要彈出confirm窗口時(shí)，會(huì)執(zhí)行onJsConfirm中的方法
* 網(wǎng)頁(yè)自身的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)頁(yè)需要彈出confirm窗口時(shí)，會(huì)執(zhí)行onJsConfirm中的方法
* 網(wǎng)頁(yè)自身的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;
}
/*
* 如果頁(yè)面被強(qiáng)制關(guān)閉,彈窗提示：是否確定離開(kāi)？
* 點(diǎn)擊確定保存數(shù)據(jù)離開(kāi)，點(diǎn)擊取消，停留在當(dāng)前頁(yè)面
*/
@Override
public boolean onJsBeforeUnload(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "彈出了離開(kāi)確認(rèn)框");
result.confirm();
return true;
}
}
class HarlanWebViewClient extends WebViewClient{
/*點(diǎn)擊頁(yè)面的某條鏈接進(jìn)行跳轉(zhuǎn)的話(huà)，會(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加載頁(yè)面
view.loadUrl(url);
return true ;
}
/*
* 網(wǎng)頁(yè)加載完畢(僅指主頁(yè)，不包括圖片)
*/
@Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 網(wǎng)頁(yè)加載完畢(僅指主頁(yè)，不包括圖片)
*/
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
/*
* 加載頁(yè)面資源
*/
@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è)方法，注意該方法一般不寫(xiě)在UI線(xiàn)程中
* addJavascriptInterface(Object obj, String interfaceName)
* obj代表一個(gè)java對(duì)象，這里我們一般會(huì)實(shí)現(xiàn)一個(gè)自己的類(lèi)，類(lèi)里面提供我們要提供給javascript訪(fǎng)問(wèn)的方法
* interfaceName則是訪(fǎng)問(wèn)我們?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方法");
/*
* 通過(guò)webView.loadUrl("javascript:xxx")方式就可以調(diào)用當(dāng)前網(wǎng)頁(yè)中的名稱(chē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è)

久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

android與javascript交互

相關(guān)帖子