android与H5互相调用

市面上很多android软件都有内嵌H5的,主要是为了节约成本,提高开发效率,其实现原理主要是通过Java代码和JavaScript代码的互相调用来实现。

Java调用Js

1,webview初始化:

private void initWebView() {
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);

        //支持双击-前提是页面要支持才显示
        webSettings.setUseWideViewPort(true);

        //支持缩放按钮-前提是页面要支持才显示
        webSettings.setBuiltInZoomControls(true);

        //设置客户端-不跳转到默认浏览器中
        webView.setWebViewClient(new WebViewClient());

        //加载网络资源
        webView.loadUrl("http://soyoungboy.com/teacher.shtml");
//        webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

        //显示页面
        setContentView(webView);
    }

2,加载main目录创建assets并且加载本地资源

webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

3,java调用调用javaScript

/**
 * Java调用javaScript
 * @param numebr
 */
private void login(String numebr) {
    webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
    setContentView(webView);
}

注意下Html5代码,回去调用javaCallJs(arg)代码:

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

    function javaCallJs(){
         document.getElementById("content").innerHTML +=   
             "<br>java调用了js无参函数";
    }
    
    function javaCallJs(arg){
         document.getElementById("content").innerHTML =
             ("欢迎:"+arg );
    }
    
    
   function showDialog(){
      alert("谷粉们你好,我是来自javascript");
   }
   





    </script>


</head>


<body>

<div align="left" id="content"> 博客园</div>
<div align="right">光临博客园</div>

<p><img src="https://www.cnblogs.com/images/logo_small.gif"></p>


<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />

</body>


</html>

JavaScript调java

1,配置javasript

 //设置支持js调用java
        webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

2,实现javaScript接口类

/**
 * js可以调用该类的方法
 */
class AndroidAndJSInterface{
        public void showToast(){
        Toast.makeText(JavaAndJSActivity.this, "我被js调用了",  Toast.LENGTH_SHORT).show();
    }
}

html5代码调用如上代码:

<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />

但是很有可能调用不起来,那么怎么处理呢?

  1. targetSdkVersion 修改为16

  2. 添加@JavascriptInterface注解,如下:
/**
 * js可以调用该类的方法
 */
class AndroidAndJSInterface{
    @JavascriptInterface
    public void showToast(){
        Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
    }
}
原文地址:https://www.cnblogs.com/androidsuperman/p/6399730.html