Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

程序员文章站 2023-12-13 17:36:04

本文实例讲述了android编程使用webview实现与javascript交互的方法。分享给大家供大家参考，具体如下： android中可以使用webview加载网页，...

本文实例讲述了android编程使用webview实现与javascript交互的方法。分享给大家供大家参考，具体如下：

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

效果图：

Android编程使用WebView实现与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>

更多关于android相关内容感兴趣的读者可查看本站专题：《android视图view技巧总结》、《android开发动画技巧汇总》、《android编程之activity操作技巧总结》、《android布局layout技巧总结》、《android开发入门与进阶教程》、《android资源操作技巧汇总》及《android控件用法总结》

希望本文所述对大家android程序设计有所帮助。