android中利用webview调用网页上的js代码 Java
2018-03-21 本文已影响52人
majorty
1.android中利用webview调用网页上的js代码。
Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true，，然后通过loadUrl就可以直接进行调用，如下所示：
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript：test()");// 调用js函数
mWebView.loadUrl("file:///android_asset/index.html");// 调用本地assets目录下的html文件，也可以直接调用网上的html文件。
- 网页上调用android中java代码的方法
在网页中调用java代码，需要在webview控件中添加javascriptInterface。如下所示：
mWebView.addJavascriptInterface(
new Object() {
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();
}
});
}
}, "demo"); //demo是对象名
在网页中，只需要像调用js方法一样，进行调用就可以
<div id='b'><a onclick="javascript：window.demo.clickOnAndroid()">b.c</a></div>
网页加载立即调用
<body onload="javascript：window.demo.clickOnAndroid()">
- Java代码调用js并传参
首先需要带参数的js函数，如function test(str)，然后只需在调用js时传入参数即可，如下所示：
mWebView.loadUrl("javascript：test('" + aa+ "')"); //aa是js的函数test()的参数
4.Js中调用java函数并传参
首先一样需要带参数的函数形式，但需注意此处的参数需要final类型，即得到以后不可修改，如果需要修改其中的值，可以先设置中间变量，然后进行修改。如下所示：
mWebView.addJavascriptInterface(
new Object() {
public void clickOnAndroid(final int i) {
mHandler.post(new Runnable() {
public void run() {
int j = i;
j++;
Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
}
});
}
}, "demo");
然后在html页面中，利用如下代码
<div id='b'><a onclick="window.demo.clickOnAndroid(2)">b.c</a></div>，即可实现调用
ps:WebView加jquery
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
// 定义访问的链接
private static String URL = "file:///android_asset/index.html";
// 定义WebView
WebView mWebView = null;
// 定义数据列表
private List<Program> programList = null;
private static final int PROGRAM_NUM = 25;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 在标题栏上显示进度
getWindow().requestFeature(Window.FEATURE_PROGRESS);
// 创建WebView对象
mWebView = new WebView(this);
setContentView(mWebView);
final Activity activity = this;
// 在标题栏显示进度
mWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
activity.setProgress(progress * 100);
}
});
programList = initProgramList();
// 设置JS可用
mWebView.getSettings().setJavaScriptEnabled(true);
// 把programList添加到js的全局对象window中，
// 这样就可以使用window.programList来获取数据
mWebView.addJavascriptInterface(programList, "programList");
mWebView.addJavascriptInterface(this, "MainActivity");
// 加载页面
mWebView.loadUrl(URL);
}
/*
* 定义js回调java函数
*/
public void showSelect(int id) {
Log.i(TAG, "select:" + id);
}
// 绑定键盘的向上,向下按钮事件触发相应的js事件
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DPAD_UP) {
mWebView.loadUrl("javascript：moveUp()");
return true;
}
if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
mWebView.loadUrl("javascript：moveDown()");
return true;
}
return super.onKeyDown(keyCode, event);
}
// 初始化数据
private List initProgramList() {
List<Program> list = new ArrayList<Program>();
for (int i = 1; i <= PROGRAM_NUM; i++) {
Program p = new Program(i, "Program:::" + i);
list.add(p);
}
return list;
}
/*
* 定义简单的数据类
*/
class Program {
private int id;
private String name;
public Program(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
对应的html文件:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
var startTop = 120;
var startPos = 1;
var totalNum = 0;
var itemHeight = 40;
$(document).ready(function(){
var con = '';
if(window.programList){
//初始化页面
totalNum = window.programList.size();
for(i=0;i< totalNum;i++){
con+='<div class="item" tar="'+programList.get(i).getId()+'">'+programList.get(i).getName()+'</div>';
}
}
$('#list').html(con);
//绑定事件
$('.item').click(function(){
var tar = $(this).attr('tar');
//回调java事件
window.MainActivity.showSelect(tar);
});
});
//接收键盘向下事件
function moveDown(){
if(startPos < totalNum){
startPos ++;
var top = (1 - startPos)* itemHeight + startTop;
$('#list').stop().animate({top:top});
}
}
//接收键盘向上事件
function moveUp(){
if(startPos > 1){
startPos --;
var top = (1 - startPos )* itemHeight + startTop;
$('#list').stop().animate({top:top});
}
}
</script>
<style>
.box{
position:relative;
left:20px;
top:20px;
width:200px;
height:280px;
background-color:#CCC;
overflow:hidden;
}
.list{
position:absolute;
left:10px;
top:120px;
width:180px;
}
.item{
height:40px;
line-height:40px;
}
.select{
position:absolute;
left:4px;
top:120px;
border:1px solid #F00;
height:40px;
width:190px;
}
</style>
</head>
<body >
<div class="box">
<div class="list" id="list">
</div>
<div class="select"> </div>
</div>
</body>
</html>
