一,android 本地调用 js 的方法
1,(包括有参和无参的情况)
首先我们从本地加载一个 html,
接下来就是用 java 调用 js 的方法。
- webview = (WebView) findViewById(R.id.webview);
- // 启用javascript
- webview.getSettings().setJavaScriptEnabled(true);
- // 从assets目录下面的加载html,JavaCallJSActivity.html 该文件大小写没问题
- webview.loadUrl("file:///android_asset/JavaCallJS1.html");
- //支持从html中弹出对话框
- webview.setWebChromeClient(new WebChromeClient());
然后让我们看一下 js 代码
- View.OnClickListener btnClickListener = new Button.OnClickListener() {
- public void onClick(View v) {
- switch (v.getId()) {
- case R.id.button1:
- //Java调用吴参数的js的函数
- // 无参数调用
- webview.loadUrl("javascript:javaCallJs()");
- break;
- case R.id.button2:
- // 调用有参数的js的函数
- // 传递参数调用
- webview.loadUrl("javascript:javaCallJswithargs(" + "'我是志高'" + ")");
- break;
- case R.id.button3:
- //调用 HTML 中的javaScript 函数 弹出对话框、
- //webview.setWebChromeClient(new WebChromeClient()); 这行代码不写的话是弹不出来框的
- webview.loadUrl("javascript:showMsg()");
- break;
- default:
- break;
- }
- }
- };
- <span style="font-size:18px;">
- <span style="font-size:18px;">
- <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 javaCallJswithargs(arg) {
- document.getElementById("content").innerHTML += ("<br\>java调用了js带参函数,并且参数是:" + arg);
- }
- function showMsg() {
- alert("志高你好,我是来自javascript");
- }
- function showMsgInAndroid() {
- myjs.showMsg('hello in android!');
- }
- </script>
- </head>
- <body>
- 兄弟我是一个 html页面,这里有javascript代码,点击按钮,javascript会被调用
- <br/>
- <div id="content">
- </div>
- </body>
- </html>
- </span>
- </span>
2,Android 调用 js 有参数有返回值的函数
Android 在 4.4 之前并没有提供直接调用 js 函数并获取值的方法,所以在此之前,常用的思路是 java 调用 js 方法,js 方法执行完毕,再次调用 java 代码将值返回。
Java 调用 js 代码:js 函数处理,并将结果通过调用 java 方法返回
- String call = "javascript:sumToJava(1,2)";
- webView.loadUrl(call);
Java 在回调方法中获取 js 函数返回值
- function sumToJava(number1, number2) {
- window.control.onSumResult(number1 + number2)
- }
可已得到 result=3;
- @JavascriptInterface public void onSumResult(int result) {
- Log.i(LOGTAG, "onSumResult result=" + result);
- }
二,Js 调用 Android 本地方法
1,添加一个类或对象,js 可以访问该类或对象的方法,该类或对象可以调用 js 里的方法。
首先创建一个对象:
- private Object getHtmlObject() {
- Object insertObj = new Object() {@JavascriptInterface public void JavacallHtml() {
- runOnUiThread(new Runnable() {@Override public void run() {
- mWebView.loadUrl("javascript: alertMessage()");
- Toast.makeText(JavaCallJSActivity2.this, "clickBtn", Toast.LENGTH_SHORT).show();
- }
- });
- }@JavascriptInterface public void JavacallHtml2() {
- runOnUiThread(new Runnable() {@Override public void run() {
- mWebView.loadUrl("javascript: showFromHtml2('I'am the king of the word!!')");
- Toast.makeText(JavaCallJSActivity2.this, "clickBtn2", Toast.LENGTH_SHORT).show();
- }
- });
- }
- };
- return insertObj;
- }
addJavascriptInterface 方法有两个参数,第一个参数就是我们自己创建的对象,对象里面提供我们要提供给 javascript 访问的方法;第二个参数是访问我们在 obj 中声明的方法时候所用到的 js 对象,调用模式为 window.interfaceName. 方法名 () 或者是 javascript:interfaceName. 方法名() ;,如
接下来看看 html 里的代码
- mWebView.addJavascriptInterface(getHtmlObject(), "Android");
- mWebView.loadUrl("file:///android_asset/JavaCallJS2.html");
当我们点击 button 的时候,调用了 Android 里的 JavacallHtml() 方法,在 JavacallHtml() 方法里又调用了 js 里的方法:
- <span style="font-size:18px;">
- <span style="font-size:18px;">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- saved from url=(0032)http://localhost:8080/jsandroid/ -->
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta http-equiv="Expires" content="0">
- <meta http-equiv="Pragma" content="no-cache">
- <meta http-equiv="Cache-Control" content="no-store,no-cache">
- <meta name="Handheldfriendly" content="true">
- <meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">
- <meta name="robots" content="all">
- <meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">
- <meta name="description" content="Make People's Mobile Life More Connected Through Games.">
- <title>
- jsandroid_test
- </title>
- <script type="text/javascript" language="javascript">
- function alertMessage() {
- alert("alert")
- }
- function showFromHtml() {
- document.getElementById("id_input").value = "JS无参方法被调用了";
- }
- function showFromHtml2(param) {
- document.getElementById("id_input2").value = "JS有参方法被调用了 : " + param;
- }
- </script>
- </head>
- <body>
- hello 今天星期五
- <br>
- <br>
- <br>
- <input id="id_input" style="width: 90%" type="text" value="请输入内容" />
- <br>
- <input type="button" value="button1--Java调用JS无参方法" onclick="javascript:Android.JavacallHtml()"
- />
- <br>
- <br>
- <br>
- <input id="id_input2" style="width: 90%" type="text" value="请输入内容" />
- <br>
- <input type="button" value="JavacallHtml-Java调用JS有参方法" onclick="window.Android.JavacallHtml2()"
- />
- </body>
- </html>
- </span>
- </span>
最后弹出对话框。
- mWebView.loadUrl("javascript: alert()");
奇怪的是,运行程序后并没有按照我的意愿弹出对话框。
查资料我手机是 6.0 系统,4.2 以上系统必须在 Android 本地的方法加上注解 @JavascriptInterface
还有一个地方需要注意
如果 addJavascriptInterface 方法里参数使用内部类,记得回调方法里操作涉及到界面的,记得放在 handler 里,因为必须在主线程操作。
2,url 中附加的私有协议,后端发送给前端数据的约定
在网页跳转的时候【必须有跳转】,截获跳转地址 Url,分析 Url 从而得知意图
- mWebView.setWebViewClient(new WebViewClient() {@Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
- view.setVisibility(View.GONE);
- Toast.makeText(Activity.this, "网络服务不可用", Toast.LENGTH_SHORT).show();
- }@Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
- LogController.d("shouldOverrideUrlLoading=" + url);
- //注意,下面的判断就是意图分析
- Uri uri = Uri.parse(url);
- if ("http".equals(uri.getScheme())) {
- //在这里做你想做的事情
- return true;
- } else {
- return false;
- }
- }
- });
- }
来源: http://lib.csdn.net/article/html5/42239