Android WebView与js交互

来源：互联网发布：linux vncviewer使用编辑：程序博客网时间：2024/05/16 19:15

一.概述

在Android开发中，我们一般使用webview加载网页，当内容加载出来以后，当我们点击webview中的内容时，可能会需要调用本地的功能，这就要涉及到WebView和js的交互了，今天来看看如何实现。先给出效果图
这里写图片描述

二.实现

首先在清单文件中添加访问网络的权限

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

然后是我们的布局文件

<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:orientation="vertical"    tools:context="com.example.webviewdemo.MainActivity">    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        />    <Button        android:id="@+id/usejs"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="click"        android:text="调用html中的js方法"        />    <Button        android:id="@+id/reload"        android:onClick="click"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="重新加载html"        /></LinearLayout>

然后在代码中添加webview对js的支持，默认是不支持的，所以必须添加

 webView = (WebView) findViewById(R.id.webview); //加上这句话才能使用JavaScript        webView.getSettings().setJavaScriptEnabled(true);

准备工作做好了，接下来我们先看看如何在java中调用js中的方法，
1.先创建一个测试用的html文件，

<html><head><script type="text/javascript">function updateHtml(){     document.getElementById("content").innerHTML =            "你通过 android 中的控件调用了html 中js 的方法";}</script></head><body>this is my html <a onClick="window.login.startFunction()" href="";>调用java中个的方法</a><span id="content"></span></body></html>

把上面的代码保存为demo.html，保存在android项目的assets下，上面的代码中，包含了一个js方法，下面我们看看如何在activity中调用

 protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.webview);        webView.getSettings().setJavaScriptEnabled(true);        //加载assets目录下的html文件        webView.loadUrl("file:///android_asset/demo.html");    }    public void click(View view){        switch (view.getId()){            case R.id.usejs:            //调用js中的方法                webView.loadUrl("javascript:updateHtml()");                break;        }    }

是不是很简单啊，我们在来看看js如何调用java方法：
首先我们添加一个包含被调用方法的对象到js中

//第一个参数为包含被js调用方法所在的对象，第二个参数为别名，在js中调用会使用webView.addJavascriptInterface(new JavaScriptInterface(),"login");

对象以及方法定义如下

 public class JavaScriptInterface{        @JavascriptInterface        public void startFunction(){            AlertDialog.Builder ab=new AlertDialog.Builder(MainActivity.this);            ab.setTitle("提示");            ab.setMessage("通过js 调用了 java 中的方法");            ab.setPositiveButton("确定", new DialogInterface.OnClickListener()            {                @Override                public void onClick(DialogInterface dialog, int which) {                    dialog.dismiss();                }            });            ab.create().show();        }    }

那么这个方法怎么被调用，我们可以注意到在html代码中我们给”调用java中个的方法”这个文字添加了点击事件，是怎么写的呢？

window.login.startFunction()

没错，就是这样调用的，window.别名.方法名，这个别名是我们在addJavascriptInterface这个方法的第二个参数定义的，
然后还有什么调用方式吗？在效果图在可以看到我们点击了第二个按钮后，也出现了js调用本地方法的效果，如何实现呢，代码如下

webView.loadUrl("javascript:window.login.startFunction()");

好了，两种调用方式都讲完了，现在总结一下，
1.java调用js方法
webView.loadUrl(“javascript:方法名”);，这个方法名称是定义在html的js中的
2.js调用java方法
webView.loadUrl(“javascript:window.别名.方法名”);，别名是我们定义在addJavascriptInterface这个方法的第二个参数，方法名使我们本地的一个方法，包含在addJavascriptInterface第一个参数对象的里面。

最后，给出完整代码，供大家学习参考

public class MainActivity extends AppCompatActivity {    private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.webview);        webView.getSettings().setJavaScriptEnabled(true);        webView.loadUrl("file:///android_asset/demo.html");        webView.addJavascriptInterface(new JavaScriptInterface(),"login");    }    public void click(View view){        switch (view.getId()){            case R.id.reload:                webView.loadUrl("javascript:window.login.startFunction()");                break;            case R.id.usejs:                webView.loadUrl("javascript:updateHtml()");                break;        }    }    public class JavaScriptInterface{        @JavascriptInterface        public void startFunction(){            AlertDialog.Builder ab=new AlertDialog.Builder(MainActivity.this);            ab.setTitle("提示");            ab.setMessage("通过js 调用了 java 中的方法");            ab.setPositiveButton("确定", new DialogInterface.OnClickListener()            {                @Override                public void onClick(DialogInterface dialog, int which) {                    dialog.dismiss();                }            });            ab.create().show();        }    }}

0 0