天天看點

也談Android中WebView與HTML的JavaScript互動

   這兩天一直在研究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>  

本文轉自 sw840227 51CTO部落格,原文連結:http://blog.51cto.com/jerrysun/560891,如需轉載請自行聯系原作者