android與javascript交互

ID:140343 · 發表于 2016-9-25 11:04

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

關于WebView，一般涉及到2個類：WebChromeClient 和 WebViewClient 。
開發的大致流程為（摘自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交互的基礎功能，并用json字符串進行了值傳遞。
秉持一貫的風格，知識內容都在代碼注釋中，這樣方便以后復習。（布局就不貼了，比較簡單）
整個工程結構比較簡單：

首先是這個jsdroid.html文件的界面（貼界面其實有點2 --！）：

html代碼比較簡單：

[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("確認界面提示?")){
return true;
}else
return false;
}
function pmt() {
var place = prompt("請輸入位置?","");
}
</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="調用android方法"/></p>
</form>
</body>
</html>

其中，id為“btn_pmt”的button，監聽器設置的是調用Android中的方法。

好了，上最重要的，android端實現的代碼。

[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中的狀態信息。
* 當WebView第一次被創建時，webSetting中存儲的都為默認值。
* WebSetting和WebView一一綁定的。
* 如果webView被銷毀了，那么我們再次調用webSetting中的方法時，會拋出異常。
*/
WebSettings webSettings = webView.getSettings();
//允許在webview中執行JavaScript代碼
webSettings.setJavaScriptEnabled(true);
//設置webview是否支持縮放
webSettings.setSupportZoom(false);
//加載本地html代碼，此代碼位于assets目錄下，通過file:///android_asset/jsdroid.html訪問。
webView.loadUrl("file:///android_asset/jsdroid.html");
/***
*webChromeClient主要是將javascript中相應的方法翻譯成android本地方法
*
* 例如：我們重寫了onJsAlert方法，那么當頁面中需要彈出alert窗口時，便
* 會執行我們的代碼，按照我們的Toast的形式提示用戶。
*/
class HarlanWebChromeClient extends WebChromeClient {
/*此處覆蓋的是javascript中的alert方法。
*當網頁需要彈出alert窗口時，會執行onJsAlert中的方法
* 網頁自身的alert方法不會被調用。
*/
@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繼續進行交互了，
* 且第一次交互后，webview不再展示出來。
* result：A JsResult to confirm that the user hit enter.
* 我的理解是，confirm代表著此次交互執行完畢。只有執行完畢了，才可以進行下一次交互。
*/
result.confirm();
return true;
}
/*此處覆蓋的是javascript中的confirm方法。
*當網頁需要彈出confirm窗口時，會執行onJsConfirm中的方法
* 網頁自身的confirm方法不會被調用。
*/
@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "彈出了確認框");
result.confirm();
return true;
}
/*此處覆蓋的是javascript中的confirm方法。
*當網頁需要彈出confirm窗口時，會執行onJsConfirm中的方法
* 網頁自身的confirm方法不會被調用。
*/
@Override
public boolean onJsPrompt(WebView view, String url,
String message, String defaultValue,
JsPromptResult result) {
Log.d(TAG, "彈出了輸入框");
result.confirm();
return true;
}
/*
* 如果頁面被強制關閉,彈窗提示：是否確定離開？
* 點擊確定保存數據離開，點擊取消，停留在當前頁面
*/
@Override
public boolean onJsBeforeUnload(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "彈出了離開確認框");
result.confirm();
return true;
}
}
class HarlanWebViewClient extends WebViewClient{
/*點擊頁面的某條鏈接進行跳轉的話，會啟動系統的默認瀏覽器進行加載，調出了我們本身的應用
* 因此，要在shouldOverrideUrlLoading方法中
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view,
String url) {
//使用當前的WebView加載頁面
view.loadUrl(url);
return true ;
}
/*
* 網頁加載完畢(僅指主頁，不包括圖片)
*/
@Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 網頁加載完畢(僅指主頁，不包括圖片)
*/
@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);
}
/*
* 錯誤提示
*/
@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提供一個方法，注意該方法一般不寫在UI線程中
* addJavascriptInterface(Object obj, String interfaceName)
* obj代表一個java對象，這里我們一般會實現一個自己的類，類里面提供我們要提供給javascript訪問的方法
* interfaceName則是訪問我們在obj中聲明的方法時候所用到的js對象，調用方法為window.interfaceName.方法名()
*/
webView.addJavascriptInterface(new Object() {
@SuppressWarnings("unused")
public void adrdMethod() {
handler.post(new Runnable() {
@Override
public void run() {
Log.d(TAG, "js調用了Android方法");
}
});
}
}, "demo");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(TAG, "Android調用了js方法");
/*
* 通過webView.loadUrl("javascript:xxx")方式就可以調用當前網頁中的名稱
* 為xxx的javascript方法
*/
webView.loadUrl("javascript:rfInfo("+jsonStr+")");
}
});
}
}

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

最終在手機上跑的效果圖：

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

帳號		自動登錄	找回密碼
密碼			立即注冊

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

android與javascript交互

相關帖子