也談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>