Android总结之WebView与Javascript交互（互相调用）

程序员文章站 2024-02-29 10:25:16

前言：最近公司的app为了加快开发效率选择了一部分功能采用h5开发，从目前市面的大部分app来讲，大致分成native app、web app、hybrid app...

前言：

最近公司的app为了加快开发效率选择了一部分功能采用h5开发，从目前市面的大部分app来讲，大致分成native app、web app、hybrid app三种方式，个人觉得目前以hybrid app居多，单纯的数据展示我们直接采用webview来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍webview与javascript交互数据，关于如何将h5网页呈现在webview上可以参考这篇博客文章：android总结之webview使用总结。

webview与javascript交互：

webview与javascript交互是双向的数据传递，1.h5网页的js函数调用native函数 2.native函数调用js函数，具体实现以下面例子为主：

1.）mainfest.xml中加入网络权限

<uses-permission android:name="android.permission.internet"/>

2.）webview开启支持javascript

mwebview.getsettings().setjavascriptenabled(true);

3.）简单的h5网页实现，主要实现actionfromnative()、actionfromnativewithparam(string str)，放在assets文件下

<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <script type="text/javascript">
 function actionfromnative(){
   document.getelementbyid("log_msg").innerhtml +=
    "<br\>native调用了js函数";
 }

 function actionfromnativewithparam(arg){
   document.getelementbyid("log_msg").innerhtml +=
    ("<br\>native调用了js函数并传递参数："+arg);
 }

 </script>
</head>
<body>
<p>webview与javascript交互</p>
<div>
 <button onclick="window.wx.actionfromjs()">点击调用native代码</button>
</div>
<br/>
<div>
 <button onclick="window.wx.actionfromjswithparam('come from js')">点击调用native代码并传递参数</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

4.）native实现与js交互函数：actionfromjs()、actionfromjswithparam()

public class mainactivity extends activity {
 private webview mwebview;
 private textview logtextview;

 @override
 public void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.main);
  mwebview = (webview) findviewbyid(r.id.webview);
  // 启用javascript
  mwebview.getsettings().setjavascriptenabled(true);
  // 从assets目录下面的加载html
  mwebview.loadurl("file:///android_asset/wx.html");
  mwebview.addjavascriptinterface(this, "wx");
  logtextview = (textview) findviewbyid(r.id.text);
  button button = (button) findviewbyid(r.id.button);
  button.setonclicklistener(new button.onclicklistener() {
   public void onclick(view v) {
    // 无参数调用
    mwebview.loadurl("javascript:actionfromnative()");
    // 传递参数调用
    mwebview.loadurl("javascript:actionfromnativewithparam(" + "'come from native'" + ")");
   }
  });

 }

 @android.webkit.javascriptinterface
 public void actionfromjs() {
  runonuithread(new runnable() {
   @override
   public void run() {
    toast.maketext(mainactivity.this, "js调用了native函数", toast.length_short).show();
    string text = logtextview.gettext() + "\njs调用了native函数";
    logtextview.settext(text);
   }
  });
 }

 @android.webkit.javascriptinterface
 public void actionfromjswithparam(final string str) {
  runonuithread(new runnable() {
   @override
   public void run() {
    toast.maketext(mainactivity.this, "js调用了native函数传递参数：" + str, toast.length_short).show();
    string text = logtextview.gettext() + "\njs调用了native函数传递参数：" + str;
    logtextview.settext(text);
   }
  });

 }
}

mwebview.addjavascriptinterface(this, "wx");相当于添加一个js回调接口，然后给这个起一个别名，我这里起的名字wx（微信哈哈）。@android.webkit.javascriptinterface为了解决addjavascriptinterface漏洞的，在4.2以后才有的。

5.）布局文件实现

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

 <webview
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"/>

 <textview android:id="@+id/text"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text=""/>

 <button
  android:id="@+id/button"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="native调用js函数"/>

</linearlayout>

6.）代码简单解说

（1.）js（html）访问android（java）端代码是通过jsobj对象实现的，调用jsobj对象中的函数，如： window.jsobj.actionfromjs()，这里的jsobj就是native中添加接口的别名

（2.）android（java）访问js（html）端代码是通过loadurl函数实现的，访问格式如：mwebview.loadurl("javascript:actionfromnative()");

demo运行截图：
Android总结之WebView与Javascript交互（互相调用）