Android教程網 >> Android技術 >> Android開發實例 >> Android WebView與JavaScript的交互

Android WebView與JavaScript的交互

編輯：Android開發實例

　　這兩天一直在研究WebView加載html文件，並顯示服務器端數據得問題，其中很關鍵的一個問題就是需要在java代碼中將從服務器端接收到的數據，傳遞到WebView的HTML頁面中，並通過JavaScript函數來將數據顯示出來。在查看了Android的API文檔以後，發現WebView有兩種方式可以和JavaScript做交互。

　　方式一：

//先加載html文件，然後調用html文件中的javascript函數 
webView.loadUrl("file:///android_asset/show.html"); 
webView.loadUrl("javascript:pushNewsData('"+strHtml+"')");

　　方式二：

//在Java代碼中添加javascript的接口，然後在html文件中調用java中的對象  
webView.addJavascriptInterface(strHtml, "MyContent");

HTML文件

<!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/xhtml; charset=utf-8" /> 
    </head> 
     
    <body id="myBody"> 
    </body> 
    <script> 
funcion pushNewsDate(dataText){
document.write(dataText);
}
        window.MyContent; 
    </script> 
</html>

　　最後我使用的是第二種方式來顯示從服務器端得到的數據。也許有朋友會問，為什麼不是用第一種方式，這樣直接調用不是很好麼，為什麼非得兜個圈子，先向WebView發送請求，然後WebView再發送數據到html頁面？
最初，我也覺得第一種方法很直觀，使用起來也很省事，但是在debug的過程中才發現這種調用方式是存在隱患的，什麼隱患呢？因為我是向html頁面傳送從服務器接收到的數據，這其中有個很難控制的地方——服務器端發送的數據是什麼樣子的？裡面有沒有非法字符？有沒有特殊字符？發現這個隱患也是很偶然的，因為之前顯示是正常的，可是突然就出現了一次不顯示任何內容的情況，debug時跟蹤了所有地方，也沒有發現代碼中出現問題，最後又將從服務器端接收到的數據放到HTML頁面中對JavaScript做debug，就這樣折騰了3個多小時，最後才發現是在使用方式一得情況下，將數據當做參數傳入到javascript函數中時，javascript對參數得值不識別造成的，即javascript認為傳入的參數的值是錯誤的。當換成第二種方式後，這個問題就不存在了，無論是什麼樣的數據，都可以在html頁面中正常顯示。
　　在第二種方式中，本人是將一個字符串“strHtml”當做對象傳入到html頁面中，如果大家希望傳入其他內容也是可以的，比如傳入一個class

public class HtmlShow{ 
     
    private String str; 
     
    public String getContent(){ 
     
        str = "initialize in java"; 
        return  str; 
    } 
} 
 
HtmlShow hs = new HtmlShow(); 
webView.addJavascriptInterface(hs, "MyContent");

　　在Html中的調用方式如下

<!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/xhtml; charset=utf-8" />  
    </head>  
      
    <body id="myBody">  
    </body>  
    <script>  
        window.MyContent.getContent();  
    </script>  
</html>

上一頁:仿照Launcher的Workspace實現左右滑動切換（上）
下一頁:Android WebView簡介（JavaScripte篇）

Android開發實例

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章