WebView的使用小结----与JS的交互

来源：互联网发布：智能扫地机排行知乎编辑：程序博客网时间：2024/06/14 22:58

WebView不但可以运行一段HTML代码，还有一个重要特点，就是WebView可以同JavaScript互相调用。

通过addJavascriptInterface(Object obj,String interfaceName)方法将一个Java对象绑定到一个Javascript对象中，Javascript对象名就是interfaceName，作用域是Global，这样便可以扩展Javascript的API，获取Android的数据。
JS交互主要分为两类

android中利用webview调用网页上的js代码。
网页上调用android中java代码的方法

1.android中利用webview调用网页上的js代码。

WebView.loadUrl("javascript:方法名()");

示例：
如果要调用js中的function test(str)方法

mWebView.loadUrl("javascript:test('ls')");

2.网页上调用android中java代码的方法

最近在公司就这样的需求，需要我这里返回数据那边的H5进行处理，就是靠这个。
这里我就给大家一个简单的例子吧
首先html文件写个简单的
l.html

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8" />    <script type="text/javascript">       function showToast(toast) {                   control.showToast(toast);        }       function log(msg) {            console.log(msg);        }    </script>     <style type="text/css">        input{            width: 100px;            height: 100px;            margin: 20px;        }    </style></head><body>     <input type="button" value="toast" onclick="showToast('hello world!这是我的显示')" >     <input type="button" value="msg1" onclick="log('hello world!')" >     <input type="text" value="2123131"  ></body></html>

对了在着重介绍下这个方法

  // 给webview添加JavaScript接口        webView.addJavascriptInterface(new JsInterface(), "control");   public class JsInterface {        @JavascriptInterface        public String showToast(String toast) {            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();            return "success";        }    }

从上面的html文件和代码可以看出来
control.showToast(toast);的control对应 webView.addJavascriptInterface(new JsInterface(), “control”);的第二个参数，而showToast则对应方法名。

package com.example.admin.webview;import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInterface;import android.os.Bundle;import android.webkit.JavascriptInterface;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.Toast;public class MainActivity extends Activity {    private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        // TODO Auto-generated method stub        // 获取webview控件        webView = (WebView) findViewById(R.id.webview);        // 获取WebView的设置        WebSettings webSettings = webView.getSettings();        // 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的        webSettings.setJavaScriptEnabled(true);        // 给webview添加JavaScript接口        webView.addJavascriptInterface(new JsInterface(), "control");        // 通过webview加载html页面        webView.setWebChromeClient(new WebChromeClient(){            @Override            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);                b.setTitle("Alert");                b.setMessage(message);                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialog, int which) {                        result.cancel();                    }                });                b.setCancelable(false);                b.create().show();                return true;            }        });        webView.loadUrl("file:///android_asset/l.html");    }    public class JsInterface {        @JavascriptInterface        public String showToast(String toast) {            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();            return "success";        }    }}

这里再次提醒 webSettings.setJavaScriptEnabled(true);一定要设置不然都是白做
还有console.log(msg);这个是只在控制台显示你们试下就知道了

再给大家说了算是：
WebView.loadUrl(“javascript:方法名()”);的使用例子。
就是点击html的任何图像都会有反应这里默认为跳转吧

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>图片</title>    </head>    <style type="text/css">        .box{            width:190px;            height:290px;            margin:0 auto;        }    </style>    <body>        <div class="box">            <img src="https://img.alicdn.com/tps/TB11tvkPFXXXXcIaXXXXXXXXXXX-190-290.jpg_290x290Q75s0.jpg">        </div>    </body></html>

话不多说直接上例子有上面的过度想必看起来就会非常轻松

@SuppressLint("SetJavaScriptEnabled")public class Main2Activity extends Activity {    private WebView contentWebView = null;    @SuppressLint("SetJavaScriptEnabled")    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main2);        contentWebView = (WebView) findViewById(R.id.webview);        // 启用javascript        contentWebView.getSettings().setJavaScriptEnabled(true);        // 随便找了个带图片的网站//        contentWebView.loadUrl("file:///android_asset/img.html");        contentWebView.loadUrl("http://139.196.208.240:801/wap/edu/news.aspx");        // 添加js交互接口类，并起别名 imagelistner        contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");        contentWebView.setWebViewClient(new MyWebViewClient());    }    // 注入js函数监听    private void addImageClickListner() {        Log.e("执行了么","执行");        // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去        contentWebView.loadUrl("javascript:(function(){" +                "var objs = document.getElementsByTagName(\"img\"); " +                "for(var i=0;i<objs.length;i++)  " +                "{"                + "    objs[i].onclick=function()  " +                "    {  "                + "        window.imagelistner.openImage(this.src);  " +                "    }  " +                "}" +                "})()");    }    // js通信接口    public class JavascriptInterface {        private Context context;        public JavascriptInterface(Context context) {            this.context = context;        }        @android.webkit.JavascriptInterface        public void openImage(String img) {            Log.e("喔喔","wewf");            System.out.println(img);            //            Intent intent = new Intent();            intent.putExtra("image", img);            intent.setClass(context, ShowWebImageActivity.class);            context.startActivity(intent);            System.out.println(img);        }    }    // 监听    private class MyWebViewClient extends WebViewClient {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            return super.shouldOverrideUrlLoading(view, url);        }        @Override        public void onPageFinished(WebView view, String url) {            view.getSettings().setJavaScriptEnabled(true);            super.onPageFinished(view, url);            // html加载完成之后，添加监听图片的点击js函数            addImageClickListner();        }        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            view.getSettings().setJavaScriptEnabled(true);            super.onPageStarted(view, url, favicon);        }        @Override        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {            super.onReceivedError(view, errorCode, description, failingUrl);        }    }}

这里要注意点是 public void openImage(String img) 这个方法前面要加注解 @android.webkit.JavascriptInterface

这里再说下 webView.loadUrl来直接调用js方法其实也可以自己写个方法来执行
比如

   webView.loadUrl("javascript:(function (){"                +"window.network.isPlay();"                +"})()"             );

0 0