android 本地自测 webview 与js的交互

首先现在assets新建一个html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">

function getAllPick(){
     document.getElementById("content").innerHTML =
         "<br\>JAVA调用了JS的无参函数";
}

function getAllPickWith(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML 内容显示 <br/>
<h1><div id="content">内容显示</div></h1>
<br/>
<input type="button"  value="点击调用java代码" onclick="window.AndroidJs.setImageNull()" />
<br/>
<input type="button"  value="点击调用java代码并传递参数" onclick="window.AndroidJs.setImage('http://blog.csdn.net/Leejizhou')"  />
</body>
</html>

webview界面代码

private WebView webView;
private WebSettings settings;


  webView = (WebView) findViewById(R.id.webview);

  webView.loadUrl(url);
//        webView.loadUrl("file:///android_asset/web.html");
        webView.addJavascriptInterface(WebActivity.this, "AndroidJs");
        settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);

  webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
               
            }

            //WebView发起的WEB请求因为网络原因失败时回调
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
              
            }

            //WebView发起的WEB请求收到服务器的错误消息时回调
            @Override
            public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
                super.onReceivedHttpError(view, request, errorResponse);
              
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //在pagefinish处调用
                webView.loadUrl("javascript:getAllPick()");
            }
        });



     @JavascriptInterface
    public void setImageNull() {
        Log.e("fhxx", "网页获取 -----》这是不穿参数的"  );

    }
    @JavascriptInterface
    public void setImage(String str) {
        Log.e("fhxx", "网页获取 -----》" + str);

    }

在原生webview 中加载完网页就会通过pageFinish

webView.loadUrl("javascript:getAllPick()");

自动调用js的getAllPick（）中的方法

想要调用传参的就用

webView.loadUrl("javascript:getAllPick()");

------

扫描二维码关注公众号，回复： 14883438 查看本文章

点击js中第一个按钮就会调用原生中的setImageNull（）方法

第二个同理同理

到次自测就完成后台根据你设定的名字来用就可以

注意的是细节，我用不同的颜色标出，相同颜色的android 与js要保持一致的地方

webView.addJavascriptInterface(WebActivity.this, "AndroidJs");

要与js中的

window.AndroidJs.setImageNull() 保持一直

方法名字要两边调用的一致

@JavascriptInterface
public void setImageNull() {
Log.e("fhxx", "网页获取 -----》这是不穿参数的" );

}

webView.loadUrl("javascript:getAllPick()");

function getAllPick(){
document.getElementById("content").innerHTML =
"<br\>JAVA调用了JS的无参函数";
}

android 本地自测 webview 与js的交互

猜你喜欢