Android：WebView与Javascript交互

Android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。

效果图：

（一）Android部分：

布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:focusable="true"  
    android:focusableInTouchMode="true"  
    android:orientation="vertical"  
    android:padding="8dp"  
    tools:context=".MainActivity">  
  
    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
  
        <EditText  
            android:id="@+id/input_et"  
            android:layout_width="0dp"  
            android:layout_height="wrap_content"  
            android:singleLine="true"  
            android:layout_weight="1"  
            android:hint="请输入信息" />  
  
        <Button  
            android:text="Java调用JS"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:onClick="sendInfoToJs" />  
    </LinearLayout>  
  
    <WebView  
        android:id="@+id/webView"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" />  
  
</LinearLayout>
View Code

Activity代码：

/** 
 * Android WebView 与 Javascript 交互。 
 */  
public class MainActivity extends ActionBarActivity {  
    private WebView webView;  
  
    @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        webView = (WebView) findViewById(R.id.webView);  
  
        webView.setVerticalScrollbarOverlay(true);  
        //设置WebView支持JavaScript  
        webView.getSettings().setJavaScriptEnabled(true);  
  
        String url = "http://192.168.1.27/js_17_android_webview.html";  
        webView.loadUrl(url);  
  
        //在js中调用本地java方法  
        webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //重要的码
  
        //添加客户端支持  
        webView.setWebChromeClient(new WebChromeClient());  
    }  
  
    private class JsInterface {  
        private Context mContext;  
  
        public JsInterface(Context context) {  
            this.mContext = context;  
        }  
  
        //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
        @JavascriptInterface  
        public void showInfoFromJs(String name) {  
            Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();  
        }  
    }  
  
    //在java中调用js代码  
    public void sendInfoToJs(View view) {  
        String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();  
        //调用js中的函数：showInfoFromJava(msg)  
        webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");  
    }  
}

（二）网页代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="zh-cn" />  
  
<title>Android WebView 与 Javascript 交互</title>  
<head>  
  <style>  
  body {background-color:#e6e6e6}  
  
  .rect  
  {  
    color:white;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-size:16px;  
    width:100px;  
    padding:6px;  
    background-color:#98bf21;  
    text-decoration:none;  
    text-align:center;  
    border:none;  
    cursor:pointer;  
  }  
  
  .inputStyle {font-size:16px;padding:6px}  
  </style>  
</head>  
  
<body>  
  <p>测试Android WebView 与 Javascript 交互</p>  
  <input id = "name_input" class = "inputStyle" type="text"/>  
  <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>  
  
  <script>  
  function sendInfoToJava(){  
    //调用android程序中的方法，并传递参数  
    var name = document.getElementById("name_input").value;  
    window.AndroidWebView.showInfoFromJs(name);  
  }  
  
  //在android代码中调用此方法  
  function showInfoFromJava(msg){  
    alert("来自客户端的信息："+msg);  
  }  
  </script>  
  
</body>  
</html>
View Code

 

posted @ 2017-09-29 15:39  风吹麦浪打  阅读(348)  评论(0)  编辑  收藏  举报