也谈Android中WebView与HTML的JavaScript交互

时间 2020-09-22

标签 android webview html javascript 交互栏目 Android 繁體版

原文原文链接

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

　　方式一：
html

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

　　方式二：
java

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

HTML文件 android

  
  
  
  
   
   
   
   <!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
web

  
  
  
  
   
   
   
   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>