Android中WebView和JavaScript（JS）的互相调用

来源：互联网发布：js简单计算器代码编辑：程序博客网时间：2024/05/18 09:10

你在公司里写一个Android App会出现这么个情况：

某天，老大突然跟你说，有一个新的需求，界面大概是这样的：……%￥#@。你一听完，头皮发麻，UI界面这么复杂。这时候老大看你难受的样子，突然告诉你说：我们决定用H5页面代替这个界面，用JS来调用客户端的一些逻辑。你一听，很happy，终于不用写这么复杂的界面了。那么WebView如何和JS进行互通呢？

下面就告诉如何通过JS让客户端显示一个Toast。

一、开启WebView的JS功能

在Android的WebView中，我们可以通过addJavaScriptInterface(Object obj,String interfaceName)方法来给这个WebView设置一个JS对象，这样网页的JS就可以通过指定的对象名和方法来调用客户端的一些方法了。

在添加JS对象之前，我们需要给WebView开启JS功能。通过如下代码：

mWebView.getSettings().setJavaScriptEnabled(true);

二、编写JS对象

紧接着，我们需要编写一个JS对象来供网页调取，我们新建一个类，并将其命名为MyJSInterface，这时候我们有个需求，并在这个类里面创建一个名为showToast的方法，并且在里面实现show Toast方法，需要注意的是，在JS的方法中，是运行在其他线程而不是主线程的，所以对UI的操作需要额外进行处理，实现方法后在这个方法名前面加上@JavascriptInterface注释，这个标签表示这是个JS接口，可以被网页调用的，如下代码：

public class JSInterface {private Context mContext;public JSInterface(Context context){mContext = context;}    @JavascriptInterface    public void showToast(String s){new Handler(mContext.getMainLooper()).post(new Runnable() {    @Override    public void run() {        Toast.makeText(mContext,s,Toast.LENGTH_SHORT).show();}}    }}

三、注册这个JS到WebView中

通过addJavaScriptInterface方法将JS对象添加到WebView中，并给这个JS对象取名为MyJS，如下所示

        mWebView.addJavascriptInterface(new MyJSInterface(mContext),                "MyJSInterface");

这里我们注意到add关键字，这说明WebView可以被添加多个JS对象，并指定不同的对象名，这里我们只添加一个，并取名MyJSInterface。

四、编写一个JS网页测试事例

这里我们编写一个JS网页测试事例来验证网页通过JS的showToast方法可以直接调用到程序中。

<!DOCTYPE html><html lang="en"><head><meta charset=utf-8><title>TEST DEMO</title></head><body><div class="container">    <div class="per_container"><button type="button" onclick="showToast();">分享</button></div></div>    <script>    function showToast(){        MyJSInterface.showToast('Test');    }    </script></body></html>

如代码所示，网页端只要在function中编写MyJSInterface.showToast(s);（对象名.方法）方法就可以触发客户端对应的showToast方法。

0 0