android webview用法小结2 java与javascript的交互

先提下两种方式

 方式一:

//先加载html文件,然后调用html文件中的javascript函数 

webView.loadUrl("file:///android_asset/show.html"); 

webView.loadUrl("javascript:pushNewsData('"+strHtml+"')");    

   方式二:

//在Java代码中添加javascript的接口,然后在html文件中调用java中的对象  

webView.addJavascriptInterface(strHtml, "MyContent");


先让浏览器支持javascript

[java]  view plain copy
  1. webView.getSettings().setJavaScriptEnabled(true);//打开就可以用js的功能  

Js代码,放在asset文件夹下,也可以在服务器端,这样改变内容,只需改服务器端,客户端不用修改

[html]  view plain copy
  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/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7. <script type="text/javascript">  
  8.     function btn_test() {  
  9. /* 打印,logcat里的tag是Web Console */  
  10.         console.log("btn_test");  
  11.     }  
  12.   
  13.     function call_java() {  
  14. /* js调用java代码,需要接口 */  
  15.         Window.interface_test.showToastFromWeb("hello i am javascript!");  
  16.     }  
  17.   
  18.     function test_alert() {  
  19. /* 弹出对话框 */  
  20.         alert("hello i am javascript!");  
  21.     }  
  22.   
  23.     function test_confirm() {  
  24.         /* 弹出带确定和取消按钮的对话框 */  
  25.     var v = confirm("hello i am javascript!");  
  26.         console.log("onfirm " + v);  
  27.     }  
  28.   
  29.     function test_prompt() {  
  30. /* 弹出带输入框的对话框 */  
  31.         var v = prompt("input you name!", "tom");  
  32.         console.log("prompt " + v);  
  33.     }  
  34.       
  35. </script>  
  36. </head>  
  37. <body>  
  38.     <button onclick="btn_test()">test</button>  
  39.     <button onclick="call_java()">call_java</button>  
  40.     <button onclick="test_alert()">test_alert</button>  
  41.     <button onclick="test_confirm()">test_confirm</button>  
  42.     <button onclick="test_prompt()">test_prompt</button>  
  43.     <label tel:800800284>tel:8008233</label>  
  44.   
  45. </body>  
  46. </html>  

Java代码里

对应call_java()方法

[java]  view plain copy
  1. webView.addJavascriptInterface(new Object(){  
  2.             public void showToastFromWeb(String msg){  
  3.                 showToast(msg);  
  4.             }  
  5.         }, "interface_test");  

对应alert等方法

[java]  view plain copy
  1. webView.setWebChromeClient(new WebChromeClient(){  
  2.   
  3.             @Override  
  4.             public void onProgressChanged(WebView view, int newProgress) {  
  5. //这里上一博文已提过  
  6.             }  
  7.   
  8.             @Override  
  9.             public boolean onJsAlert(WebView view, String url, String message,  
  10.                     JsResult result) {  
  11.                 // TODO Auto-generated method stub  
  12.                 return super.onJsAlert(view, url, message, result);  
  13.             }  
  14.               
  15.             @Override  
  16.             public boolean onJsConfirm(WebView view, String url,  
  17.                     String message, JsResult result) {  
  18.                 // TODO Auto-generated method stub  
  19.                 return super.onJsConfirm(view, url, message, result);  
  20.             }  
  21.   
  22.             @Override  
  23.             public boolean onJsPrompt(WebView view, String url, String message,  
  24.                     String defaultValue, JsPromptResult result) {  
  25.                 // TODO Auto-generated method stub  
  26.                 return super.onJsPrompt(view, url, message, defaultValue, result);  
  27.             }  
  28.                           
  29.         });  

加载html

[java]  view plain copy
  1. //          webView.loadUrl("javascript:btn_test()");  
  2.             webView.loadUrl("file:///android_asset/test.html");  

效果图

android webview用法小结2 java与javascript的交互_第1张图片android webview用法小结2 java与javascript的交互_第2张图片android webview用法小结2 java与javascript的交互_第3张图片android webview用法小结2 java与javascript的交互_第4张图片


原文在http://blog.csdn.net/ethan_xue/article/details/7849610

你可能感兴趣的:(android webview用法小结2 java与javascript的交互)