Android：WebView与Javascript交互（相互调用参数、传值）

来源：互联网发布：国外教育学专业知乎编辑：程序博客网时间：2024/05/18 08:47

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

Activity代码：

//在js中调用本地java方法
webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());

/**  * 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>

0 0