Android與JS的交互簡單實現


Android與JS的交互簡單實現

現在Android的勢頭慢慢已經趨向平穩.java的光輝歲月再一次燃燒(雖然java一直都是一顆常青樹).Android為什么要使用js呢?如果一個webview都可以解決的問題,問什么還要寫android代碼?android從業人員會不會失業,這種擔心確實有必要啊.不過還是要看看谷歌baba的態度哦!閑話不多說.開車.友情提示:車速40邁!

概述:

既然是Android與JavaScript的交互.心中可定有疑問.

  • 1,js如何調用android的代碼,准確來說應該是webview如何調用
  • 2.android如何調用js的代碼

第一:js調用android代碼

1.首先來一段最最簡單的jsp代碼

 <body>
<p>WebView與Javascript交互</p>
<div>
<button onClick="window.android.actionFromJs()">點擊調用Android代碼</button>
</div>
<br />
<div>
<button onClick="window.android.actionFromJsWithParam(' data come from Js')">點擊調用Android代碼並傳遞參數</button>
</div>
<br />
<div id="log_msg">調用打印信息</div>
</body>

等等,

不傳遞參數:
<button onClick="window.android.actionFromJs()">點擊調用Android代碼</button>

將參數傳遞到android代碼中
<button onClick="window.android.actionFromJsWithParam('data come from Js')">點擊調用Android代碼並傳遞參數</button>

onClick我懂,就是為button注冊一個點擊事件.可是window.android.actionFromJs()是什么鬼.其實actionFromJs()就是android代碼中的一個普通方法.那么window.android又是什么東西:

如果我們想實現交互.還要對webview就行一些設置:

 // 啟用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
/** 為webview添加注冊js 接口回調監聽.
*
* 參數一: 接口對象
* 參數二: 接口別名(別名讓js代碼使用)
* 如果別名寫"haha". 那么js中就要寫window.haha.方法名
*/


mWebView.addJavascriptInterface(this, "android");

2.來看android怎么寫

/**
* js調用此方法
*/

@android.webkit.JavascriptInterface
public void actionFromJs() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js調用了Android函數", Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs調用了Android函數";
logTextView.setText(text);
}
});
}

/**
* js調用此方法. 並且將參數傳遞過來
*
* @param str js 傳遞過來的參數
*/

@android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js調用了Android函數傳遞參數:" + str, Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs調用了Android函數傳遞參數:" + str;
logTextView.setText(text);
}
});

}

actionFromJs(),actionFromJsWithParam(final String str)方法就是我們在android代碼中定義好的方法.以供js去調用.

注意: 要想讓js調用必須在方法名上加注解

    @android.webkit.JavascriptInterface

哦.js掉用android已經搞定

第二:android調用js代碼

android調用js代碼那就更加簡單了.

  • 首先我們肯定要有js代碼:
<html>
<head>
<script type="text/javascript">
// 無參方法
function actionFromNative() {
document.getElementById("log_msg").innerHTML += "<br\>Android調用了js函數";
}
//有參方法
function actionFromNativeWithParam(arg) {
document.getElementById("log_msg").innerHTML += ("<br\>Android調用了js函數並傳遞參數:" + arg);
}
</script>
</head>

<body>
<div id="log_msg">調用打印信息</div>
</body>
</html>
  • 其次:android代碼調用方法
  /**
* 調用js.
* WebView.loadUrl("javascript:js中定義的方法")
*/

button.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
// 無參數調用 android端調用js 方法
mWebView.loadUrl("javascript:actionFromNative()");
// 傳遞參數調用
mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
}
});

這樣就能實現相互之間的傷害了.

3.bug修復

有些手機使用webview打開時.會提示用瀏覽器打開網頁.我們要對webview設置一下了

 /**
* 重寫這個方法的話,加載頁面就不會彈出瀏覽器打開了
*/

mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}

/**
* 頁面加載完成回調
* @param view
* @param url
*/

@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});

附:實現代碼

http://download.csdn.net/detail/fengltxx/9694232


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com