这两天一直在研究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>最后有一点需要说明,当使用javascript去掉用android的函数的时候,如果你用的是系统集成,则很有可能会被混淆机制过滤掉。(或许我们调试时还好好的,但在系统里面无法调用了)。这时要在应用的proguard.flags里按照相关格式,添加需要的函数。
