總網頁瀏覽量

2013年3月8日 星期五

webview:從javascript呼叫java程式;從java呼叫javascript程式

webview在app顯示自己寫的網頁

網頁html檔案放在assets 底下

可以新增file然後命名為xxx.html
接著open with textedit
我們就可以自行開發網頁
並且在android系統上瀏覽自己開發的網頁


webview1.loadUrl("http://archive.org/web/web.php");
//載入網址,在webview顯示該網址的內容

webview1.loadUrl("file:///android_asset/myweb.html");
//自訂Html檔案

記得:
AndroidManifest.xml的permission中add user premission加上可以上網的權限


做到以上的事情只能瀏覽網頁。
無法執行javascript程式碼


我們必須開放javascript權限,指令如下
webview1.getSetting().setJavaScriptEnabled(true);

也可以先宣告private WebSettings setting;
setting = webview.getSetting();
setting.setJavaScriptEnabled(true);
如此一來可以執行javascript程式
我們可以去jQuery官方網站測試
http://jqueryui.com/hide/
開放javascript之後有出現js特效
不過卻無法出現alert的效果

Websetting存著Webview狀態屬性
其實在Webview物件建立時候會給websetting預設值
webview跟websetting是綁在一塊的
當webview物件消失時,若取用websetting會拋出例外

一、從JavaScript去呼叫Java的物件執行程式


wv1.addJavascriptInterface(new MyJavaScript(MainActivity.this), "yypalert");
//建立javascript與java互動的介面,指定要執行的java物件(MyJavaScript)與執行程式所在地(MainActivity.this),設定介面名稱,讓javascript識別的字串"yypalert"。如此一來JavaScript可以經由yypalert存取.java物件的method。

//MainActivity.this代表MainActivity類別的物件。
//若只寫this代表MainActivity內部類別的物件


wv1.loadUrl("file:///android_asset/myweb.html");
//導至自訂的網頁

//Javascript要執行的code

private class MyJavaScript{
private Context context;//因為Toast要指定toast顯示地方,所以宣告context,接收上面的MainActivity.this物件
MyJavaScript(Context c){
context=c;

}
public void sayYa(String msg){
Toast.makeText(context, msg,Toast.LENGTH_LONG).show();
}}//context:Activity,msg從javascript接收的字串,Toast.LENGTH_LONG指定Toast秀出時間長度。記得要價上.show()


關於MainActivity.this:
「在 Android 程式中, 大多數的程式可能都是在事件處理時執行, 而大多數的事件處理都是寫在匿名的內部類別 (Inner Class) 中, 也就是說, 當事件處理執行時, 所屬的物件是內部類別所產生的物件, 因此若是只寫 this, 那麼所指的其實是這個內部類別的物件, 但我們需要傳遞的是外部 Activity 類別的物件 (Activity 是 Context 的衍生類別), 這時就必須在 this 前冠上外部類別的名稱, 而這也就是你會看到 XXXActivity.this 的原因。」


Context是抽象類別繼承自Object,是Activity的父類別


HTML檔案目前有一個button,以及javascript程式

<input type='button' value='Click1' onClick='ok1()' />

<script>
function ok1()
{
yypalert.sayYa('OK');
}</script>

執行畫面有個按鈕給他按下去之後,觸發onclick事件,跑去執行javascrip的ok1函式,看到yypalert介面名稱跑去.java對應的地方,執行java的method sayYa()並傳入字串'OK',在螢幕上顯示OK字眼


二、從Java(Android)呼叫JavaScript程式

作法很簡單
在MainActivity.java裡面利用.loadUrl()呼叫JavaScript函式:

 
public void toJavaScript(){
wv1.loadUrl("javascript:fromAndroid("+(int)(Math.random()*49)+")");
//呼叫javascript的function fromAndroid()並傳隨機數字。
//執行這行以前務必先打開自己寫的html,再執行這行,否則android是不會自動跳到自己寫的html
}    



在Html裡面準備一個名字叫formAndroid的function

function fromAndroid(msg){

                  document.getElementById('here').innerHTML=msg;
//在Html裡面找到id為here的元件,並且在標籤之間插入字串msg

}

<div id='here'></div>
//執行之後這邊區塊會輸出隨機亂數

在寫javascript時候注意拼字問題,javascript沒有偵錯字功能
如此一來就可以從Android送資料去javascript的function了


沒有留言:

張貼留言