Android中可以通过WebView来实现与js的交互，让用户可以在android客户端看到js写的页面，接下来为大家介绍的就是怎样实现此功能：
首先android项目目录下有“assets”文件夹，开发者需要将html文件拷贝到此文件夹下。
html代码：
<!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"> //此方法是调用了android的方法HtmlcallJava2()；
function showHtmlcallJava2(){
var str = document.getElementById("id_input").value
var str1 = document.getElementById("id_input2").value //调用android中的方法
window.jsObj.HtmlcallJava2(str+","+str1);
}
</script>
</head>
<body>
hello IT-homer
<br>
<br>
<br>
<br>
<input id="id_input" style="width: 90%" type="text" value="null" />
<br>
<br>
<input id="id_input2" style="width: 90%" type="text" value="null" />
<br>
</body>
</html>
xml布局文件，很简单：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".JSAndroidActivity" >
<WebView
android:id="@+id/mWebView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickView"
android:text="获取" />
</LinearLayout>
mainActivity中的核心代码是：WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);mWebView.addJavascriptInterface(jsInterface, "jsObj");
mWebView.loadUrl("file:///android_asset/index.html");请理解核心代码的详细注释
mainActivity代码：
package com.homer.jsandroid;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.StringTokenizer;
import android.R.anim;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;
public class JSAndroidActivity extends Activity {
private Activity mActivity = null;
private WebView mWebView = null;
private String message;
private JsInterface jsInterface;
private String[] params = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mActivity = this;
// 锁定横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
setContentView(R.layout.main);
params = new String[2];
jsInterface = new JsInterface();
showWebView();
}
@SuppressLint("SetJavaScriptEnabled")
private void showWebView() {
try {
mWebView = (WebView) findViewById(R.id.mWebView);
mWebView.requestFocus();
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int progress) {
JSAndroidActivity.this.setTitle("Loading...");
JSAndroidActivity.this.setProgress(progress);
if (progress >= 80) {
JSAndroidActivity.this.setTitle("JsAndroid Test");
}
}
});
mWebView.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK
&& mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return false;
}
});
// WebView的管理设置状态
WebSettings webSettings = mWebView.getSettings();
// 设置android下容许执行js的脚本
webSettings.setJavaScriptEnabled(true);
// 编码方式
webSettings.setDefaultTextEncodingName("utf-8");
/*
* 使用这个函数将一个对象绑定到Javascript,因此可以从Javascript访问的方法,
* Android（Java）与js（HTML）交互的接口函数, jsObj 为桥连对象可随意设值
*/
mWebView.addJavascriptInterface(jsInterface, "jsObj");
/*
* Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：
* mWebView.loadUrl("javascript: showFromHtml()");
*/
mWebView.loadUrl("file:///android_asset/index.html");
} catch (Exception e) {
e.printStackTrace();
}
}
private class JsInterface {
/**
* js中通过window.jsObj.HtmlcallJava2("参数") 可以调用此方法并且把js中input中的值作为参数传入，
* 但这是在点击js中的按钮得到的，若实现点击java中的按钮得到，需要方法 clickView(View v)
*
* @param param
*/
public void HtmlcallJava2(final String param) {
message = param;
String str = message;
StringTokenizer st = new StringTokenizer(str, ",;");
while (st.hasMoreTokens()) {
for (int i = 0; i < params.length; i++) {
params[i] = st.nextToken();
System.out.println(params[i]);
}
}
Toast.makeText(JSAndroidActivity.this, param, Toast.LENGTH_SHORT)
.show();
}
}
/**
* button的点击事件
*
* @param v
*/
public void clickView(View v) {
runOnUiThread(new Runnable() {
@Override
public void run() {
/**
* 调用js中的方法实现点击java中的按钮得到js中input的值
*/
mWebView.loadUrl("javascript: showHtmlcallJava2()");
}
});
}
}
希望给大家带来帮助，谢谢!
时间： 2024-08-18 02:51:24