注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

民主与科学

独立之人格,自由之思想

 
 
 

日志

 
 

WebView与JavaScript的交互  

2012-02-13 15:34:16|  分类: Android的UI开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文: http://jerrysun.blog.51cto.com/745955/560891

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://jerrysun.blog.51cto.com/745955/560891

   这两天一直在研究WebView加载html文件,并显示服务器端数据得问题,其中很关键的一个问题就是需要在java代码中将从服务器端接收到的数据,传递到WebView的HTML页面中,并通过JavaScript函数来将数据显示出来。在查看了Android的API文档以后,发现WebView有两种方式可以和JavaScript做交互。

  方式一:

  1. //先加载html文件,然后调用html文件中的javascript函数 
  2. webView.loadUrl("file:///android_asset/show.html"); 
  3. webView.loadUrl("javascript:pushNewsData('"+strHtml+"')");    

   方式二:

  1. //在Java代码中添加javascript的接口,然后在html文件中调用java中的对象  
  2. webView.addJavascriptInterface(strHtml, "MyContent"); 


HTML文件 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" /> 
  5.     </head> 
  6.      
  7.     <body id="myBody"> 
  8.     </body> 
  9.     <script> 
  10. funcion pushNewsDate(dataText){
  11. document.write(dataText);
  12. }
  13.         window.MyContent; 
  14.     </script> 
  15. </html> 

  最后我使用的是第二种方式来显示从服务器端得到的数据。也许有朋友会问,为什么不是用第一种方式,这样直接调用不是很好么,为什么非得兜个圈子,先向WebView发送请求,然后WebView再发送数据到html页面?
最初,我也觉得第一种方法很直观,使用起来也很省事,但是在debug的过程中才发现这种调用方式是存在隐患的,什么隐患呢?因为我是向html页面传送从服务器接收到的数据,这其中有个很难控制的地方——服务器端发送的数据是什么样子的?里面有没有非法字符?有没有特殊字符?发现这个隐患也是很偶然的,因为之前显示是正常的,可是突然就出现了一次不显示任何内容的情况,debug时跟踪了所有地方,也没有发现代码中出现问题,最后又将从服务器端接收到的数据放到HTML页面中对JavaScript做debug,就这样折腾了3个多小时,最后才发现是在使用方式一得情况下,将数据当做参数传入到javascript函数中时,javascript对参数得值不识别造成的,即javascript认为传入的参数的值是错误的。当换成第二种方式后,这个问题就不存在了,无论是什么样的数据,都可以在html页面中正常显示。
  在第二种方式中,本人是将一个字符串“strHtml”当做对象传入到html页面中,如果大家希望传入其他内容也是可以的,比如传入一个class

  1. public class HtmlShow{ 
  2.      
  3.     private String str; 
  4.      
  5.     public String getContent(){ 
  6.      
  7.         str = "initialize in java"
  8.         return  str; 
  9.     } 
  10.  
  11. HtmlShow hs = new HtmlShow(); 
  12. webView.addJavascriptInterface(hs, "MyContent"); 

  在Html中的调用方式如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />  
  5.     </head>  
  6.       
  7.     <body id="myBody">  
  8.     </body>  
  9.     <script>  
  10.         window.MyContent.getContent();  
  11.     </script>  
  12. </html>  

 

本文出自 “徘徊在c#,java,php之间” 博客,请务必保留此出处http://jerrysun.blog.51cto.com/745955/560891

  评论这张
 
阅读(569)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017