Android----WebView與JavaScript互動調用(2)

上一篇文章主要講解了如何在js中調用java函數

地址：http://www.bkjia.com/kf/201205/132839.html

這一篇將js與java相互調用再來一個例子，解決相互調用之間的關係。

 

首先說明一重要代碼的情況：

android中的關鍵代碼：

webview.getSettings().setJavaScriptEnabled(true);

webview.addJavascriptInterface(object,"name"); //把Name="name"的對象添加到object中。object如果是this，就是window.name

webview.loadUrl("file:///android_asset/index.html"); //注意這個資源的位置放在assets檔案夾下。

 

 

js或html中調用android中方法代碼：

js中使用 window.name.java中的方法()；

android中調用js的function方法：

         Callfunction(){

         webview.loadUrl("javascript: function ()");

需要注意的地方，很多資料類型js中不認識，最好是在android那邊封裝好，提供必要的方法介面。比如傳到js中的list，在js中是沒辦法去得到裡面的元素的。

addJavascriptInterface：addJavascriptInterface方法中要綁定的Java對象及方法要運行在另外的線程中，不能運行在構造他的線程中，也就是說不能運行在當前的activity線程中，就是把這個方法綁定到頁面中，js也可以調用。

文檔中的解釋：

Use this function to bind an object to Javascript so that the methods can be accessed from Javascript.

The Java object that is bound runs in another thread and not in the thread that it was constructed in.

 

下面給出具體的測試代碼：

1、Activity 代碼

[java]
public class TestWebView extends Activity { 
    private WebView mWebView; 
    private List<String> list; 
    private int mkeyCode; 
 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
        mWebView = (WebView) findViewById(R.id.htmlview); 
 
        initData(); 
         
        WebSettings webSettings = mWebView.getSettings(); 
         
        // 是否允許在webview中執行javascript  
        webSettings.setJavaScriptEnabled(true); 
         
        mWebView.addJavascriptInterface(this, "javatojs"); 
 
        //載入網頁  
        mWebView.loadUrl("file:///android_asset/index.html"); 
    } 
     
    @Override 
    public boolean onKeyUp(int keyCode, KeyEvent event) { 
        mkeyCode = keyCode; 
        Log.i("AA","keyCode="+keyCode); 
        mWebView.loadUrl("javascript: OnKeyUp()"); 
        return super.onKeyUp(keyCode, event); 
    } 
     
    public int getKeyCode(){ 
        return mkeyCode; 
    } 
     
    void initData() { 
        list = new ArrayList<String>(); 
        for (int i = 0; i < 5; i++) { 
            list.add("我是List中的第" + (i + 1) + "行"); 
        } 
    } 
     
    /**
     * 該方法將在js指令碼中，通過window.javatojs.....()進行調用
     * 
     * @return
     */ 
    public Object getObject(int index) { 
        Log.i("A","getObject");      
        return list.get(index); 
    } 
 
    public int getSize() { 
        Log.i("A","getSize"); 
        return list.size(); 
    } 
 
    public void Callfunction() { 
        Log.i("A","Callfunction"); 
        mWebView.loadUrl("javascript: GetList()"); 
    } 
     
    public void printStr(String str){ 
        Log.i("A","GetList:" + str); 
    }    
} 
public class TestWebView extends Activity {
 private WebView mWebView;
 private List<String> list;
 private int mkeyCode;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mWebView = (WebView) findViewById(R.id.htmlview);

  initData();
  
  WebSettings webSettings = mWebView.getSettings();
  
  // 是否允許在webview中執行javascript
  webSettings.setJavaScriptEnabled(true);
  
  mWebView.addJavascriptInterface(this, "javatojs");

  //載入網頁
  mWebView.loadUrl("file:///android_asset/index.html");
 }
 
 @Override
 public boolean onKeyUp(int keyCode, KeyEvent event) {
  mkeyCode = keyCode;
  Log.i("AA","keyCode="+keyCode);
  mWebView.loadUrl("javascript: OnKeyUp()");
  return super.onKeyUp(keyCode, event);
 }
 
 public int getKeyCode(){
  return mkeyCode;
 }
 
 void initData() {
  list = new ArrayList<String>();
  for (int i = 0; i < 5; i++) {
   list.add("我是List中的第" + (i + 1) + "行");
  }
 }
 
 /**
  * 該方法將在js指令碼中，通過window.javatojs.....()進行調用
  *
  * @return
  */
 public Object getObject(int index) {
  Log.i("A","getObject");  
  return list.get(index);
 }

 public int getSize() {
  Log.i("A","getSize");
  return list.size();
 }

 public void Callfunction() {
  Log.i("A","Callfunction");
  mWebView.loadUrl("javascript: GetList()");
 }
 
 public void printStr(String str){
  Log.i("A","GetList:" + str);
 } 
}
    2、js 代碼 index.html

[javascript]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<title>demotitle></title> 
 
<script language="javascript">  
 
function GetList(){ 
    var i=window.javatojs.getSize(); 
 
    for(var n=0;n<i;n++){ 
        var jsdata= window.javatojs.getObject(n);//拿到activity裡面的屬性javadata  
        window.javatojs.printStr("test"); 
    } 
} 
 
function OnKeyUp() { 
    var keycode = window.javatojs.getKeyCode(); 
    window.javatojs.printStr(keycode); 
} 
 
</script> 
</head> 
 
 <body style="background-color:#000;"> 
  <table width="400" align="center"><tr><td> 
  <p> </p> 
  <p> 
<table width="400" align="center"> 
<div id="output" >test</div> 
    <input type="submit" value="buttons" 
    onclick="document.getElementById('output').innerHTML=window.javatojs.Callfunction()"/> 
  <br> 
 
  </p> 
  </td></tr></table> 
</body> 
 
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>demotitle></title>

<script language="javascript">

function GetList(){
 var i=window.javatojs.getSize();

 for(var n=0;n<i;n++){
  var jsdata= window.javatojs.getObject(n);//拿到activity裡面的屬性javadata
  window.javatojs.printStr("test");
 }
}

function OnKeyUp() {
 var keycode = window.javatojs.getKeyCode();
 window.javatojs.printStr(keycode);
}

</script>
</head>

 <body style="background-color:#000;">
  <table width="400" align="center"><tr><td>
  <p> </p>
  <p>
<table width="400" align="center">
<div id="output" >test</div>
    <input type="submit" value="buttons"
    onclick="document.getElementById('output').innerHTML=window.javatojs.Callfunction()"/>
  <br>

  </p>
  </td></tr></table>
</body>

</html>

以上代碼主要測試js與java相互調用，而由於按鍵這種系統事件被webview截獲掉，有如下兩種方式進行處理

1、把方向鍵的流程改成：先傳給webcore，假如沒處理，再在webview裡面處理，這個需要修改webview.java代碼

2、直接應用搞定，java捕獲按鍵，然後調js函數，上面代碼就是使用這種方法。

 

測試結果如下： 點擊buttons按鈕：

I/A       ( 4990): Callfunction

I/A       ( 4990): getSize

I/A       ( 4990): getObject

I/A       ( 4990): GetList:test

I/A       ( 4990): getObject

I/A       ( 4990): GetList:test

I/A       ( 4990): getObject

I/A       ( 4990): GetList:test

I/A       ( 4990): getObject

I/A       ( 4990): GetList:test

I/A       ( 4990): getObject

I/A       ( 4990): GetList:test

 

you press KEY_RIGHT

I/AA      ( 4990): keyCode=22

I/A       ( 4990): GetList:22

 

you press KEY_UP

I/AA      ( 4990): keyCode=19

I/A       ( 4990): GetList:19

 

you press KEY_DOWN

I/AA      ( 4990): keyCode=20

I/A       ( 4990): GetList:20

 

you press KEY_LEFT

I/AA      ( 4990): keyCode=21

I/A       ( 4990): GetList:21

這裡為何使用這種方式，是因為對於上下左右及確定這種功能鍵被webview截取掉了，無法傳遞到webcore中，而只能重載OnKeyDown/OnKeyUp方法，再由js調用java方法來擷取得。

對於數字鍵的處理可以直接在js中進行處理：

logcat中會有明顯的列印，對於這些鍵沒有截掉，所以可以直接擷取得到：

D/webcore ( 4990): proc key: code=12

D/webcore ( 4990): proc key: nativeKey return false

D/webcore ( 4990): proc key: nativeKey return true

js代碼可以如此編寫：

[javascript]
 <script language="JavaScript"> 
 
document.onkeypress = grab_keypress_event; 
document.onirkeypress = grab_irkeypress_event; 
document.onsystemevent = grab_system_event; 
document.onkeydown = grab_keydown_event; 
document.onkeyup = grab_keyup_event; 
 
function init() 
{ 
    document.getElementById("txt_keypress").innerHTML = ""; 
    document.getElementById("txt_irkey").innerHTML= ""; 
    document.getElementById("txt_systemevent").innerHTML=""; 
    document.getElementById("txt_keydown").innerHTML=""; 
    document.getElementById("txt_keyup").innerHTML=""; 
} 
 
function grab_keypress_event(event) 
{ 
    var keycode = event.keyCode; 
    document.getElementById("txt_keypress").innerHTML=keycode; 
} 
 
function grab_irkeypress_event(event) 
{ 
    var keycode = event.keyCode; 
    document.getElementById("txt_irkey").innerHTML=keycode; 
} 
 
function grab_system_event(event) 
{ 
    var keycode = event.which; 
    document.getElementById("txt_systemevent").innerHTML=keycode; 
} 
 
function grab_keydown_event(event) 
{ 
    var keycode = event.keyCode; 
    var type = event.type; 
    var mod = event.modifiers; 
    document.getElementById("txt_keydown").innerHTML=keycode; 
} 
 
function grab_keyup_event(event) 
{ 
    var keycode = event.keyCode; 
    document.getElementById("txt_keyup").innerHTML=keycode; 
} 
 </script> 
  <script language="JavaScript">

 document.onkeypress = grab_keypress_event;
 document.onirkeypress = grab_irkeypress_event;
 document.onsystemevent = grab_system_event;
 document.onkeydown = grab_keydown_event;
 document.onkeyup = grab_keyup_event;
 
 function init()
 {
  document.getElementById("txt_keypress").innerHTML = "";
  document.getElementById("txt_irkey").innerHTML= "";
  document.getElementById("txt_systemevent").innerHTML="";
  document.getElementById("txt_keydown").innerHTML="";
  document.getElementById("txt_keyup").innerHTML="";
 }
 
 function grab_keypress_event(event)
 {
  var keycode = event.keyCode;
  document.getElementById("txt_keypress").innerHTML=keycode;
 }

 function grab_irkeypress_event(event)
 {
  var keycode = event.keyCode;
  document.getElementById("txt_irkey").innerHTML=keycode;
 }

 function grab_system_event(event)
 {
  var keycode = event.which;
  document.getElementById("txt_systemevent").innerHTML=keycode;
 }

 function grab_keydown_event(event)
 {
  var keycode = event.keyCode;
  var type = event.type;
  var mod = event.modifiers;
  document.getElementById("txt_keydown").innerHTML=keycode;
 }

 function grab_keyup_event(event)
 {
  var keycode = event.keyCode;
  document.getElementById("txt_keyup").innerHTML=keycode;
 }
  </script>

 

摘自 andyhuabing的專欄