您的位置：首页 > 移动开发 > Android开发

android app与h5交互

2016-05-20 15:03 543 查看
一，android本地调用js的方法

1,(包括有参和无参的情况）

首先我们从本地加载一个HTML，

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());
接下来就是用java调用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;
}

}
};
然后让我们看一下js代码
<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代码：

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);
js函数处理，并将结果通过调用java方法返回

function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {
Log.i(LOGTAG, "onSumResult result=" + result);
}
可已得到result=3;

二，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;
}


接下来使用webview对象的addJavascriptInterface方法
addJavascriptInterface方法有两个参数，第一个参数就是我们自己创建的对象，对象里面提供我们要提供给javascript访问的方法；第二个参数是访问我们在obj中声明的方法时候所用到的js对象，调用模式为window.interfaceName.方法名()或者是javascript:interfaceName.方法名() ;，如

mWebView.addJavascriptInterface(getHtmlObject(), "Android");
mWebView.loadUrl("file:///android_asset/JavaCallJS2.html");
接下来看看html里的代码
<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>
当我们点击button的时候，调用了Android里的JavacallHtml()方法，在JavacallHtml()方法里又调用了js里的方法：
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;
}
}
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  android java javascript html app
相关文章推荐
新的分享
章节导航