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

main/assets/news_detail.xml

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
        <script type="text/javascript">
        
            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>
    
    <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();

你可能感兴趣的:(进阶)