WebView实现js与java代码的互相调用

最新推荐文章于 2024-06-26 09:45:04 发布

SkylakeXun

最新推荐文章于 2024-06-26 09:45:04 发布

阅读量1.3k

点赞数

分类专栏：进阶

本文链接：https://blog.csdn.net/skylakexun/article/details/78983552

版权

进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

main/assets/news_detail.xml

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
        <script type="text/javascript">
        <!--第一步,在Html中定义js方法-->
            function showContent(jsondata){
            alert(title);
             document.getElementById("personts").innerHTML=jsondata;
            }
            function showTitle(jsondata){
            alert(title);
             document.getElementById("title").innerHTML=jsondata;
            }
            function test(){
                showTitle("哈哈哈");
                contact.test2();
            }
        </script>
        <!--修正图片尺寸，设置宽度最大值，高度自适应防变形-->
        <style>img{max-width:100% !important; height:auto !important;}</style>
    </head>
    <!--在加载网页时,调用js的两个方法-->
    <body onload="javascript:contact.showContent();javascript:contact.showTitle();" bgcolor="#efeff4">
        <!--白色圆角背景-->
        <div
                style=" background-color:white; border-radius:10px; margin:8px; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; box-shadow:3px 3px 2px 2px lightgray; ">
            <!--标题-->
            <p id="title" style="font-size:0.8em;text-align: center; color:#2191FB; margin:0px;" >
            </p>
            <!--横线-->
            <div  style="background-color:#efeff4; width:100%; height:1px; margin-top:5px; margin-bottom:5px;"></div>
            <div style="font-size:0.5em;" id="personts">
            </div>
        </div>
    </body>
</html>

WebView的常用初始化操作

        wv_NewsDetail.loadUrl("file:///android_asset/news_detail.html");
        WebSettings settings = wv_NewsDetail.getSettings();

        //开启js支持
        settings.setJavaScriptEnabled(true);
        //设置缩放工具可见
        settings.setSupportZoom(true);
        //设置js可以自动打开窗口
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
//        //支持缩放
//        settings.setDisplayZoomControls(true);
        //启用内置的放大机制
        settings.setBuiltInZoomControls(true);
        //启用插件
        settings.setPluginState(WebSettings.PluginState.ON);
        //支持meta标签,与缩放相关
        settings.setUseWideViewPort(true);
        //缩放至屏幕的大小
        settings.setLoadWithOverviewMode(true);
        //设置字体大小为最大
        settings.setTextSize(WebSettings.TextSize.LARGEST);

        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        int mDensity = metrics.densityDpi;
        if (mDensity == 240) {
            settings.setDefaultZoom(WebSettings.ZoomDensity.FAR);
        } else if (mDensity == 160) {
            settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
        } else if (mDensity == 120) {
            settings.setDefaultZoom(WebSettings.ZoomDensity.CLOSE);
        } else if (mDensity == DisplayMetrics.DENSITY_XHIGH) {
            settings.setDefaultZoom(WebSettings.ZoomDensity.FAR);
        } else if (mDensity == DisplayMetrics.DENSITY_TV) {
            settings.setDefaultZoom(WebSettings.ZoomDensity.FAR);
        }

定义接口,实现js与java互相调用的协议

    public final class JsObject{
        @JavascriptInterface
        public void showContent() {
       wv_NewsDetail.loadUrl("javascript:showContent('"+mData.getNews_content()+"')");
        }
        @JavascriptInterface
        public void showTitle() {
        //调用js中的方法
      wv_NewsDetail.loadUrl("javascript:showTitle('" + mData.getNews_title() + "')");
        }
    }

        @JavascriptInterface
        public void test() {
            wv_NewsDetail.loadUrl("javascript:test()");
        }

    @JavascriptInterface
    public void test(){
        Logger.d("test2");
    }

    //定义为接口,第二个参数是js中调用的实例名称
    wv_NewsDetail.addJavascriptInterface(mJsObject=new JsObject(),"contact");

js中调用java代码

            function test(){
            //在定义接口时传入的实例名称,调用其可以调用java代码
                contact.test2();
            }

通过jsobject对象
jsobject.test()
会调用
wv_NewsDetail.loadUrl("javascript:test()");
js中的test()会调用java中jsobject.test2();

SkylakeXun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView实现js与java代码的互相调用

main/assets/news_detail.xmlhtml> head> meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> script type="text/javascript">
复制链接

扫一扫

专栏目录