android与javascript交互

ID:140343 · 发表于 2016-9-25 11:04

Android与Javascript交互主要是使用的WebView。

关于WebView，一般涉及到2个类：WebChromeClient 和 WebViewClient 。
开发的大致流程为（摘自Android developer）：
A WebView has several customization points where you can add your own behavior. These are:
Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks).
Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).
Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().
Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.
好了，废话不多说，上Demo。
此demo完成了Android与Javascript交互的基础功能，并用json字符串进行了值传递。
秉持一贯的风格，知识内容都在代码注释中，这样方便以后复习。（布局就不贴了，比较简单）
整个工程结构比较简单：

首先是这个jsdroid.html文件的界面（贴界面其实有点2 --！）：

html代码比较简单：

[html] view plain copy
print?

<html>
<meta charset="GBK">
<head>
<title>js交互android</title>
<script type="text/javascript">
function show(){
var a = document.getElementById("text").value;
alert("警告，你输入的是："+a);
}
function rfInfo(jsonStr) {
document.getElementById("info").innerHTML="从Android客户端传来的作者信息:"+jsonStr.Developer;
}
function cfm() {
if(confirm("确认界面提示?")){
return true;
}else
return false;
}
function pmt() {
var place = prompt("请输入位置?","");
}
</script>
</head>
<body>
<form action="">
<p><div id="info" >从Android客户端传来的作者信息:</div></p>
<p><input type="text" id="text" value="input your msg"/></p>
<p><div id="inputinfo" >输入的信息:</div></p>
<p><input type="button" id="btn_alert" value="Alert"/></p>
<p><input type="button" id="btn_cfm" value="Confirm"/></p>
<p><input type="button" id="btn_pmt" value="Prompt"/></p>
<p><input type="button" id="btn_pmt" value="调用android方法"/></p>
</form>
</body>
</html>

其中，id为“btn_pmt”的button，监听器设置的是调用Android中的方法。

好了，上最重要的，android端实现的代码。

[java] view plain copy
print?

package com.harlan.demo.activity;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
WebView webView;
Handler handler = new Handler();
Button btn;
final String jsonStr = "{\"Developer\":\"Harlan\",\"Place\":\"Nanjing\"}";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.myweb);
btn = (Button) findViewById(R.id.mybtn);
/*
* webSettings 保存着WebView中的状态信息。
* 当WebView第一次被创建时，webSetting中存储的都为默认值。
* WebSetting和WebView一一绑定的。
* 如果webView被销毁了，那么我们再次调用webSetting中的方法时，会抛出异常。
*/
WebSettings webSettings = webView.getSettings();
//允许在webview中执行JavaScript代码
webSettings.setJavaScriptEnabled(true);
//设置webview是否支持缩放
webSettings.setSupportZoom(false);
//加载本地html代码，此代码位于assets目录下，通过file:///android_asset/jsdroid.html访问。
webView.loadUrl("file:///android_asset/jsdroid.html");
/***
*webChromeClient主要是将javascript中相应的方法翻译成android本地方法
*
* 例如：我们重写了onJsAlert方法，那么当页面中需要弹出alert窗口时，便
* 会执行我们的代码，按照我们的Toast的形式提示用户。
*/
class HarlanWebChromeClient extends WebChromeClient {
/*此处覆盖的是javascript中的alert方法。
*当网页需要弹出alert窗口时，会执行onJsAlert中的方法
* 网页自身的alert方法不会被调用。
*/
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
Toast.makeText(getApplicationContext(), message,
Toast.LENGTH_LONG).show();
Log.d(TAG, "弹出了提示框");
/*此处代码非常重要，若没有，android就不能与js继续进行交互了，
* 且第一次交互后，webview不再展示出来。
* result：A JsResult to confirm that the user hit enter.
* 我的理解是，confirm代表着此次交互执行完毕。只有执行完毕了，才可以进行下一次交互。
*/
result.confirm();
return true;
}
/*此处覆盖的是javascript中的confirm方法。
*当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法
* 网页自身的confirm方法不会被调用。
*/
@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "弹出了确认框");
result.confirm();
return true;
}
/*此处覆盖的是javascript中的confirm方法。
*当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法
* 网页自身的confirm方法不会被调用。
*/
@Override
public boolean onJsPrompt(WebView view, String url,
String message, String defaultValue,
JsPromptResult result) {
Log.d(TAG, "弹出了输入框");
result.confirm();
return true;
}
/*
* 如果页面被强制关闭,弹窗提示：是否确定离开？
* 点击确定保存数据离开，点击取消，停留在当前页面
*/
@Override
public boolean onJsBeforeUnload(WebView view, String url,
String message, JsResult result) {
Log.d(TAG, "弹出了离开确认框");
result.confirm();
return true;
}
}
class HarlanWebViewClient extends WebViewClient{
/*点击页面的某条链接进行跳转的话，会启动系统的默认浏览器进行加载，调出了我们本身的应用
* 因此，要在shouldOverrideUrlLoading方法中
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view,
String url) {
//使用当前的WebView加载页面
view.loadUrl(url);
return true ;
}
/*
* 网页加载完毕(仅指主页，不包括图片)
*/
@Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
/*
* 网页加载完毕(仅指主页，不包括图片)
*/
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
/*
* 加载页面资源
*/
@Override
public void onLoadResource(WebView view, String url) {
// TODO Auto-generated method stub
super.onLoadResource(view, url);
}
/*
* 错误提示
*/
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
// TODO Auto-generated method stub
super.onReceivedError(view, errorCode, description, failingUrl);
}
};
webView.setWebChromeClient(new HarlanWebChromeClient());
webView.setWebViewClient(new HarlanWebViewClient());
/*
* 为js提供一个方法，注意该方法一般不写在UI线程中
* addJavascriptInterface(Object obj, String interfaceName)
* obj代表一个java对象，这里我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法
* interfaceName则是访问我们在obj中声明的方法时候所用到的js对象，调用方法为window.interfaceName.方法名()
*/
webView.addJavascriptInterface(new Object() {
@SuppressWarnings("unused")
public void adrdMethod() {
handler.post(new Runnable() {
@Override
public void run() {
Log.d(TAG, "js调用了Android方法");
}
});
}
}, "demo");
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(TAG, "Android调用了js方法");
/*
* 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称
* 为xxx的javascript方法
*/
webView.loadUrl("javascript:rfInfo("+jsonStr+")");
}
});
}
}

这只是粗略地学习了下android和Javascript的交互，后面的，还需要继续深入研究下。

最终在手机上跑的效果图：

Demo的下载地址：
http://download.csdn.net/detail/singleton1900/5238800

帐号		自动登录	找回密码
密码			立即注册

android与javascript交互

相关帖子