javascriptandroid
㈠ android與javascript的交互可以不通過webview嗎
在android的應用程序中,可以直接調用webview中的javascript代碼,而webview中的javascript代碼,也可以去調用ANDROID應用程序(也就是JAVA部分的代碼).下面舉例說明之:
1JAVASCRIPT腳本調用android程序
要在webview中,調用addJavascriptInterface(OBJ,interfacename)
其中,obj為和javascript通信的應用程序,interfacename為提供給JAVASCRIPT調用的
名稱,設置如下:
?
1
2
3
4
5
WebViewwebView=newWebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
//設定JavaScript腳本代碼的界面名稱是」android」
webView.addJavascriptInterface(this,"android");
其中WEBVIEW調用的HTML頁中,JS如下:
?
1
2
3
4
<scripttype="text/javascript">
functionok(){
android.js(document.forms[0].elements[0].value,document.forms[0].elements[1].value);
}
而這個android.js在哪呢?那是在應用程序中的
?
1
2
3
4
//JavaScript腳本代碼可以調用的函數js()處理
publicvoidjs(Stringaction,Stringuri){
...../
}
這個JS中就是處理JAVASCRIPT發送過來的請求了.
2)下面的例子,當WEBVIEW網頁中輸入後,點提交按鈕,會跟ANDROID的應用程序進行交互
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
WebViewwebView=newWebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(newMyWebChromeClient());
webView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
//onJsAlert()函數接收到來自HTML網頁的alert()警告信息
publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,JsResultresult){
if(message.length()!=0){
AlertDialog.Builderbuilder=newAlertDialog.Builder(JExample02.this);
builder.setTitle("FromJavaScript").setMessage(message).show();
result.cancel();
returntrue;
}
returnfalse;
}
而HTML頁中的JS事件為:
?
1
<inputtype="button"value="alert"onclick="alert(document.forms[0].elements[0].value)">
特別提示下,在自定義的MyWebChromeClient())中,除了可以重寫onJSAlert外,還可以
重寫onJsPrompt,onJsConfirm等,可以參考
http://618119.com/archives/2010/12/20/199.html
3)下面這個例子,先顯示第一張圖片,點一點後，再顯示第2張圖片
HTMLJS中:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<scriptlanguage="javascript">
functionchangeImage02(){
document.getElementById("image").src="navy02.jpg";
}
functionchangeImage01(){
document.getElementById("image").src="navy01.jpg";
}
</script>
</head>
<body>
<aonClick="window.demo.onClick()">
<imgid="image"src="navy01.jpg"/></a>
</body>
當點<aonClick="window.demo.onClick()">
後,調用ANDROID應用程序中的處理部分,看程序:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
webView.addJavascriptInterface(newJSInterface(),"demo");
publicfinalclassJSInterface{
//JavaScript腳本代碼可以調用的函數onClick()處理
publicvoidonClick(){
handler.post(newRunnable(){
publicvoidrun(){
if(flag==0){
flag=1;
webView.loadUrl("javascript:changeImage02()");
}else{
flag=0;
webView.loadUrl("javascript:changeImage01()");
}
}
});
}
}
可以看到,ANDROID中,通過webView.loadUrl去調用HTML頁面中的JS
㈡ 如何在iOS和Android上選擇一個JavaScript 引擎進行應用開發
在我開始使用OpenAphid-Engine的時候，已經有幾種類似的iOS/Android 項目.這些商業項目或者開源項目使用JavaScript實現代碼特性。比如，Titanium 和PhoneGap 允許開發者使用JavaScript開發本地 iOS/Android apps;ngCore 更是可以使用純正的JavaScript構建跨平台的游戲。JavaScript已經成為了編程語言中的佼佼者，也因為更容易學習吸引了眾多開發者參與到這一領域。
怎樣在IOS/Android上使用JavaScript
主要有兩種方法。一種是使用系統的瀏覽器組件（IOS中的UIWebView和Android中的WebView），另一方法就是使用整合好的JavaScript引擎。
使用系統的瀏覽器組件比較容易實現但是更復雜，效率也低。 WebView提供了 addJavascriptInterface 把Java classes注入到JavaScript文本的方法。但是它只支持最原始的幾種數據類型，因此也局限了API設計。並且在Android 2.3模擬器上不穩定，在真機上也會遇到 issue #12987的問題。在IOS上更糟 UIWebView沒有公共的APIs支持JavaScript到Objective-C的交互(你必須使用似有的APIs才能達到與addJavascriptInterface相同的功能)。
PhoneGap 是基於 UIWebView and WebView的比較出名的項目。開發者被迫使用回調函數從JavaScript APIs得到返回值。這在游戲上效率極低，也更為復雜。
早期的ngCore同樣依賴UIWebView來支持iOS。但是這個機制由於其糟糕的表現被取代。
為了獲得更好的表現、靈活性、兼容性，嵌入全功能的JavaScript引擎變得更為有效。
選擇JavaScript 引擎
據我所知，iOS 或 android 上能夠運行的JavaScript 引擎有4個： JavaScriptCore, SpiderMonkey, V8 and Rhino.下面這個表格展示各個引擎在iOS 和 Android 的兼容性
當我設計 OpenAphid-Engine 成為一個合適的Javascript的引擎的時候，我主要考量以下指標：
兼容性：同時支持iOS 和 Android 在x86 和 ARM 平台上的 模擬器和 設備。
穩定性. 穩定的運行在對應的平台和CPU的架構上。
擴展性. 能夠很方便的利用本地特性進行擴展。例如OpenAphid-Engine 通過一個橋接層，實現了通過Javascript 進行OpenGL ES 的使用。
性能好：一個快速的Javascript 引擎主要歸結為兩個因素：有效的綁定機制和進行較低的開銷。. OpenAphid-Engine 在渲染一幀頁面的時候通過JavaScript觸發數百個OpenGL ES調用來進行渲染。這點是非常有意義的，如果只是把開銷放到單純的執行JavaScript上進行將會導致渲染很慢，。
體積小.：在內存的佔用上和自身的執行文件上都要比較小。
Rhino和 V8出現的最早，但是不支持iOS。我非常希望可以使用 V8開發 OpenAphid-Engine ，在初次使用時就發現它擁有優雅的代碼結構，良好的表現，但是我非常失望，因為 V8隻能在JIT模式下使用，而IOS不支持。除非你使用jailbroken設備。（詳情請參考 issue #1312)
我在JavaScriptCore和SpiderMonkey間糾結了很久。在成功部署了Android和IOS項目後，我通過實驗找到更好的一個。
SpiderMonkey 容易得到開發許可權，但是在與JavaScriptCore比較時甘拜下風。SpiderMonkey產生了大量的二進制文件 (在ARMv7上大約1.3MB)；JavaScript執行得更慢，在JavaScript和C++的橋接表現更為重要。另外一個讓我遠離SpiderMonkey的原因是在iOS模擬器上出現隨機崩潰現象。
JavaScript引擎會受很多東西影響，比如交叉編譯器的版本、引擎的版本和操作系統的種類等。下表列舉了幾種運行在iPod Touch 4上引擎的運行時間。（有興趣請於Google Doc查看精確的時間）
JavaScriptCore 大比分領先。
我沒有找到SpiderMonkey，所以就使用了下面的三種自定義搭建Cocos2d-iPhone-2.1-beta4， Cocos2d-x-2.1-beta3和iMonkey。
所有測試的apps都基於LLVM 4.1版本，所有的引擎都運行在解釋器模式（iOS受限）。
幾種基準的介紹:
1m-js_loop執行空循環一百萬次。
1m-native_function請求調用一百萬次返回undefined的本地函數
1m-js_function跟上面一個相同，只是換成了JavaScript。
fib(30)遞歸的方式計算Fibonacci(30)。
sudoku-5用這里的演算法解決Sudoku問題。
1m-native_function JavaScriptCore使用可移植的C APIs實現，當然這不是最有效引入本地函數的方法。
SpiderMonkey 在台式電腦上由於高級的JIT追蹤方法運行更快，但是在IOS設備上卻與之相反。
在大部分的基準上，使用iMonkey比SpiderMonkey更快
很明顯的，使用SpiderMonkey將會在iOS上獲得更好的表現。ngCore 1.10在iOS上加入自定義功能，所以要更優於像SpiderMonkey這樣的變體。
對於JavaScript Code 的挑戰
在我專心於 JavaScriptCore之後，我的研究更進了一步：
1. 它在運行 一百萬 次 native_function和 一百萬次Math.abs(0) 的時間六倍於 使用 JavaScriptCore.我觀察到同樣的性能問題出現在通過注入的方式訪問對象的屬性。
2. 利用 C APIs 進行設計雖然開發簡單，但是缺乏靈活的內存管理機制。缺乏一個高級的內部垃圾回收機制很難解決類似於 circular references 的問題。
3. 眾多的 JavaScriptCore 正式版本都是可用的 。 不過 OpenAphid-Engine 是更好的一個，它不但速度快，而且相當小。
我拋棄了原來的使用 C APIs 方案因此解決了 問題 1 和 2. 使用的JSC 版本來自於iOS4.3.3，因為同樣在解析器模式下這個版本相比來自於iOS 5 的版本更快，執行文件更小。
在其他產品上使用的JS引擎
在開發OpenAphid-Engine期間，我一直保持對其他引擎的關注，以下這個表格總結了其他JS引擎的使用情況
㈢ javascript調用android問題
onclick="window.Android.show()"
你的語法寫錯了,js調用Android要用window.TAG
這個TAG就是
webView.addJavascriptInterface(new Object(), TAG); // 設置javaScript可用於操作Activity類
看你的代碼,你傳遞了一個Android
因此你的js里應改成window.Android.show();
㈣ JS 調用android的方法該怎麼調
<body>
<!-- Calls into the javascript interface for the activity -->
<!-- 從HTML文件中調用activity中的函數 -->
<!-- 也就是從HTML到android程序 留意window.demo.clickOnAndroid()這句話 -->
<a onClick="window.demo.clickOnAndroid()">Click</a>
</body>
mWebView.addJavascriptInterface(newDemoJavaScriptInterface(),"demo");
{
DemoJavaScriptInterface(){
}
/**
*ThisisnotcalledontheUIthread.Postarunnabletoinvoke
*
*loadUrlontheUIthread.
*
*/
publicvoidclickOnAndroid(){//注意這里的名稱。它為clickOnAndroid(),注意，注意，嚴重注意
mHandler.post(newRunnable(){
publicvoidrun(){
Toast.makeText....
}
});
}
}
㈤ 如何在JAVASCRIPT調用Android JAVA函數
首先是網頁：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>js和android相互調用</title>
<head>
<scripttype="text/javascript"language="javascript">
//調用java方法jsCallJava()
functionshowHtmlcallJava(){
varstr=window.android.jsCallJava();
document.getElementById("info1").value=str;
}
//調用java方法jsCallJavaWithParams(Stringvar)，帶參數
functionshowHtmlcallJava2(){
varstr=window.android.jsCallJavaWithParams("DevinChen");
document.getElementById("info2").value=str;
}
//提供給java調用的方法
functionshow(){
document.getElementById("id_input").value="Java調用Html中的方法";
}
//提供給java調用的方法，帶參數
functionshowWithParam(param){
document.getElementById("id_input2").value="Java調用Html中的方法:"+param;
}
</script>
</head>
<body>
<inputid="info1"style="width:90%"type="text"value="null"/><br>
<inputtype="button"value="Html調用Java方法"onclick="showHtmlcallJava()"/><br>
<inputid="info2"style="width:90%"type="text"value="null"/><br>
<inputtype="button"value="Html調用帶參數的Java方法"onclick="showHtmlcallJava2()"/><br>
<inputid="id_input"style="width:90%"type="text"value="null"/><br>
<inputtype="button"value="Java調用Html方法"onclick="window.android.javaCallJavaScript()"/><br>
<inputid="id_input2"style="width:90%"type="text"value="null"/><br>
<inputtype="button"value="Java調用帶參數的Html方法"onclick="window.android.javaCallJavaScriptWithParams()"/>
</body>
</html>
Android部分的布局就一個WebView，MainActivity源代碼：
/**
*java方法和javascript方法的相互調用
*/
{
privatestaticfinalStringurl="http://192.168.0.100:8080/server";
privateWebViewmWebView;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
privatevoidinitView(){
mWebView=(WebView)findViewById(R.id.web_main);
WebSettingssettings=mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDefaultTextEncodingName("utf-8");
mWebView.loadUrl(url);
mWebView.setWebViewClient(newWebViewClient());
//這兩句是必須的,"android"就是jsp中調用方法時window後面的對象
Objectobj=getObject();
mWebView.addJavascriptInterface(obj,"android");
}
privateObjectgetObject(){
Objectobj=newObject(){
/**
*html中的JavaScript調用Java方法
*註解是必須的
*@return
*/
@JavascriptInterface
publicStringjsCallJava(){
return"JavaScript調用Java方法";
}
/**
*html中的JavaScript調用帶參數的Java方法
*註解是必須的
*@return
*/
@JavascriptInterface
(Stringvar){
return"JavaScript調用帶參數的Java方法"+var;
}
/**
*java調用html中的方法,遺憾的是不知道有什麼辦法可以拿到返回值
*/
@JavascriptInterface
publicvoidjavaCallJavaScript(){
runOnUiThread(newRunnable(){
@Override
publicvoidrun(){
mWebView.loadUrl("javascript:show()");
}
});
}
/**
*java調用html中的方法，並且傳遞參數,這個有大用
*/
@JavascriptInterface
(){
runOnUiThread(newRunnable(){
@Override
publicvoidrun(){
mWebView.loadUrl("javascript:showWithParam('baoge')");
}
});
}
};
returnobj;
}
}
㈥ android中用javascript嗎
Android之如何使用javascript調用android代碼
使用javascript調用android代碼
1.使用webview對象的addJavascriptInterface方法
2.addJavascriptInterface方法有兩個參數，第一個參數就是我們一般會實現一個自己的類，類裡面提供我們要提供給javascript訪問的方法；第二個參數是訪問我們在obj中聲明的方法時候所用到的js對象，調用模式為window.interfaceName.方法名()或者是javascript: interfaceName.方法名() ;，如myWebView.addJavascriptInterface(new JavaScriptinterface(this), "android");
3.編寫JavaScriptinterface類，如有一個函數名為showToast()的方法
4.在html中調用時的形式：javascript：android.showToast()。
附上一個小例子:
import android.content.Context;
import android.widget.Toast;
public class JavaScriptinterface {
private Context mContext;
/** Instantiate the interface and set the context */
public JavaScriptinterface(Context c) {
mContext = c;
}
/** Show a toast from the web page */
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
import java.io.BufferedReader;
import java.io.File;
import java.io.InputStreamReader;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
private WebView myWebView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myWebView = (WebView) findViewById(R.id.myWebView);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JavaScriptinterface(this),
"android");
String htmlText = getFromAssets("test.html");
//把myWebView載入html
myWebView.loadData(htmlText, "text/html", "utf-8");
myWebView.setWebViewClient(new myWebViewClient());
}
// 此按鍵監聽的是返回鍵，能夠返回到上一個網頁（通過網頁的hostlistery）
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
myWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
public String getFromAssets(String fileName) {
try {
InputStreamReader inputReader = new InputStreamReader(
getResources().getAssets().open(fileName));
BufferedReader bufReader = new BufferedReader(inputReader);
String line = "";
String Result = "";
while ((line = bufReader.readLine()) != null)
Result += line;
if (bufReader != null)
bufReader.close();
if (inputReader != null)
inputReader.close();
return Result;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
class myWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function showAndroidToast(toast) {
javascript:android.showToast(toast);
}
</script>
</head>
<body>
<input type="button" value="Say hello"
onClick="showAndroidToast('Hello Android!')" />
</body>
</html>
android的應用程序中,可以直接調用WebView 中的javascript 代碼：
import java.io.BufferedReader;
import java.io.File;
import java.io.InputStreamReader;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
public class MainActivity02 extends Activity {
/** Called when the activity is first created. */
private WebView webView;
private Button button;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main2);
webView=(WebView) this.findViewById(R.id.webView);
button=(Button) this.findViewById(R.id.button);
WebSettings setting=webView.getSettings();
//設置支持javascript
setting.setJavaScriptEnabled(true);
//增加介面方法,讓html頁面調用
webView.addJavascriptInterface(new Object(){
//這里我定義了一個撥打的方法
public void startPhone(String num){
Intent intent=new Intent();
intent.setAction(Intent.ACTION_CALL);
intent.setData(Uri.parse("tel:"+num));
startActivity(intent);
}
}, "demo");
//載入頁面
webView.loadUrl("file:///android_asset/test2.html");
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
webView.loadUrl("javascript:show('activity傳過來的數據')"); //調用javascript函數
/*
* 通過webView.loadUrl("javascript:xxx")方式就可以調用當前網頁中的名稱
* 為xxx的javascript方法
*/
}
});
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function show(content){
document.getElementById("countent").innerHTML=
"這是我的javascript調用. 這是："+content;
}
</script>
</head>
<body>
<table align="center">
<tr><td>姓名</td><td>電話</td></tr>
<tr><td>小明</td><td><a href="javascript:demo.startPhone(123)">123</a></td></tr>
<tr><td>小王</td><td><a href="javascript:demo.startPhone(456)">456</a></td></tr>
</table>
<p id="countent">html原始數據</p>
</body>
</html>