关闭

JS交互示例

33人阅读 评论(0) 收藏 举报
分类:

Android中可以使用WebView加载网页,同时android端的Java代码可以与网页上的JavaScript代码之间相互调用。

效果图:


(一)Android部分:

布局代码:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:focusable="true"  
  6.     android:focusableInTouchMode="true"  
  7.     android:orientation="vertical"  
  8.     android:padding="8dp"  
  9.     tools:context=".MainActivity">  
  10.   
  11.     <LinearLayout  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content">  
  14.   
  15.         <EditText  
  16.             android:id="@+id/input_et"  
  17.             android:layout_width="0dp"  
  18.             android:layout_height="wrap_content"  
  19.             android:singleLine="true"  
  20.             android:layout_weight="1"  
  21.             android:hint="请输入信息" />  
  22.   
  23.         <Button  
  24.             android:text="Java调用JS"  
  25.             android:layout_width="wrap_content"  
  26.             android:layout_height="wrap_content"  
  27.             android:onClick="sendInfoToJs" />  
  28.     </LinearLayout>  
  29.   
  30.     <WebView  
  31.         android:id="@+id/webView"  
  32.         android:layout_width="match_parent"  
  33.         android:layout_height="match_parent" />  
  34.   
  35. </LinearLayout>  
Activity代码:
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  * Android WebView 与 Javascript 交互。 
  3.  */  
  4. public class MainActivity extends ActionBarActivity {  
  5.     private WebView webView;  
  6.   
  7.     @SuppressLint({"SetJavaScriptEnabled""AddJavascriptInterface"})  
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.   
  13.         webView = (WebView) findViewById(R.id.webView);  
  14.   
  15.         webView.setVerticalScrollbarOverlay(true);  
  16.         //设置WebView支持JavaScript  
  17.         webView.getSettings().setJavaScriptEnabled(true);  
  18.   
  19.         String url = "http://192.168.1.27/js_17_android_webview.html";  
  20.         webView.loadUrl(url);  
  21.   
  22.         //在js中调用本地java方法  
  23.         webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");  
  24.   
  25.         //添加客户端支持  
  26.         webView.setWebChromeClient(new WebChromeClient());  
  27.     }  
  28.   
  29.     private class JsInterface {  
  30.         private Context mContext;  
  31.   
  32.         public JsInterface(Context context) {  
  33.             this.mContext = context;  
  34.         }  
  35.   
  36.         //在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。  
  37.         @JavascriptInterface  
  38.         public void showInfoFromJs(String name) {  
  39.             Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();  
  40.         }  
  41.     }  
  42.   
  43.     //在java中调用js代码  
  44.     public void sendInfoToJs(View view) {  
  45.         String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();  
  46.         //调用js中的函数:showInfoFromJava(msg)  
  47.         webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");  
  48.     }  
  49. }  
(二)网页代码:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <html>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <meta http-equiv="Content-Language" content="zh-cn" />  
  7.   
  8. <title>Android WebView 与 Javascript 交互</title>  
  9. <head>  
  10.   <style>  
  11.   body {background-color:#e6e6e6}  
  12.   
  13.   .rect  
  14.   {  
  15.     color:white;  
  16.     font-family:Verdana, Arial, Helvetica, sans-serif;  
  17.     font-size:16px;  
  18.     width:100px;  
  19.     padding:6px;  
  20.     background-color:#98bf21;  
  21.     text-decoration:none;  
  22.     text-align:center;  
  23.     border:none;  
  24.     cursor:pointer;  
  25.   }  
  26.   
  27.   .inputStyle {font-size:16px;padding:6px}  
  28.   </style>  
  29. </head>  
  30.   
  31. <body>  
  32.   <p>测试Android WebView 与 Javascript 交互</p>  
  33.   <input id = "name_input" class = "inputStyle" type="text"/>  
  34.   <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>  
  35.   
  36.   <script>  
  37.   function sendInfoToJava(){  
  38.     //调用android程序中的方法,并传递参数  
  39.     var name = document.getElementById("name_input").value;  
  40.     window.AndroidWebView.showInfoFromJs(name);  
  41.   }  
  42.   
  43.   //在android代码中调用此方法  
  44.   function showInfoFromJava(msg){  
  45.     alert("来自客户端的信息:"+msg);  
  46.   }  
  47.   </script>  
  48.   
  49. </body>  
  50. </html>  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14272次
    • 积分:574
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:29篇
    • 译文:1篇
    • 评论:7条
    文章分类
    最新评论