[Android]WebView与Js交互的学习

最新推荐文章于 2024-07-04 17:32:15 发布

ychy0001

最新推荐文章于 2024-07-04 17:32:15 发布

阅读量130

点赞数

分类专栏： android 文章标签： android webview javascript

本文链接：https://blog.csdn.net/ychy0001/article/details/50295571

版权

android 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近公司让用JS调用本地客户端第三方分享，所有查阅了一下WebView与JS交互的方法。

经过个大神的博客学习，总结如下：

首先，要进行WebView交互，需要在Android中定义出来一个WebView。

mWebView = (WebView) findViewById(R.id.wv_webview);

第二，对WebView进行一定的初始化。

 //获取WebView的设置
        WebSettings webSettings = mWebView.getSettings();
        //设置WebView支持JavaScript 重要！
        webSettings.setJavaScriptEnabled(true);
        //设置编码方式
        webSettings.setDefaultTextEncodingName("utf-8");

第三，调用JS代码，加载HTML页面。

 /**
         * 设置JavaScript调用的方法 addJavascriptInterface(Object,String)
         * 第一个参数为调用的方法所在对象
         * 第二个参数为JavaScript中所使用的名称
         */
        mWebView.addJavascriptInterface(new MyObject(this),"testClick");
        //加载assets目录下的html
        mWebView.loadUrl("file:///android_asset/demo.html");

第四，设置JS要调用的方法在第三部中addJavaScriptInterface()中的第一个参数

class MyObject{
        Context mContxt;
        public MyObject(Context context) {
            this.mContxt = context;
        }
        //android4.2以后需要加上该注解
        @JavascriptInterface
        public void jsCallAndroid(final String name) {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
                }
            });
        }
    }

第五，Android调用JS的设置通过一个Button的点击事件处理主要就是一句loadUrl("javascript:androidCallJs()"); 前面javascript不能丢，冒号后面为调用js的方法名

mBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用网页中的JS
                mWebView.loadUrl("javascript:androidCallJs()");
            }
        });

第六：对于点击没有效果注意Android在4.2之前，是可以直接声明JS调用的本地方法的，但是在4.2之后为了安全性，需要在本地方法上添加注解：@JavascriptInterface

键第四条上定义的JS调用的本地方法。

html文件放置assets目录：

<html>
    <body>
        <a>点击调用Android方法</a>
        <h1></h1>
    </body>

    <script>
        function androidCallJs(){
    	    document.getElementsByTagName("h1")[0].innerHTML="Android调用Js啦";
        }
        var clickA = document.getElementsByTagName('a')[0];
        clickA.addEventListener('click', function(){
            //调用android中的方法 注意testClick需要在android代码中定义
		    testClick.jsCallAndroid("Js调用Android啦");
            return false;
        }, false);
    </script>
</html>

运行界面如下：