android ,webView之间的互相传值，好用

来源：互联网发布：天刀少女脸型数据编辑：程序博客网时间：2024/06/09 08:23

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>

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>

1 1