市面上很多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()" />
但是很有可能调用不起来,那么怎么处理呢?
-
targetSdkVersion 修改为16
- 添加@JavascriptInterface注解,如下:
/** * js可以调用该类的方法 */ class AndroidAndJSInterface{ @JavascriptInterface public void showToast(){ Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show(); } }