也谈Android中WebView与HTML的JavaScript交互

╰+攻爆jí腚メ 2022-02-04 06:09 284阅读 0赞

这两天一直在研究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. 
12. HtmlShow hs = **new** HtmlShow(); 
13. 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****>**

本文转自 sw840227 51CTO博客，原文链接：http://blog.51cto.com/jerrysun/560891，如需转载请自行联系原作者