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

最新推荐文章于 2024-04-23 09:52:46 发布

原创最新推荐文章于 2024-04-23 09:52:46 发布 · 730 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#string #javascript #html #java #webview

webview使用专栏收录该内容

11 篇文章

订阅专栏

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();"
                +"})()"
             );