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

使用webview加载本地html页面,并处理html页面中的javascript事件

2012-04-13 17:48 921 查看

今天做的andorid项目有个需要动态生成组件的需求,不想使用listview和gridview等等组件,就想着使用webview加载本地页面,然后处理页面中的js事件,让其在页面中动态的生成html组件,下面是效果图:

页面很丑,也很简单,就是点击上面的按钮,会根据传递过来的值,动态的生成该数量的按钮,然后再点击html页面上的button的时候,弹出一个Toast,废话不多说,上代码:

android代码:

package com.test.activity;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

import com.test.model.Person;

public class WebViewDemo extends Activity {
private WebView mWebView;
private Handler mHandler = new Handler();

public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.webviewdemo);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

mWebView.addJavascriptInterface(new Object() {
List<Person> persons=new ArrayList<Person>();

/**
* 由html页面中调用该方法,获得persons的size(),并动态的生成该数量的button
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
//System.out.println("hello");
int nums=10;
for (int i = 0; i < nums; i++) {
Person person=new Person();
person.name="name"+(i+1);
person.age=(i+1)+"";
persons.add(person);
}
String javascript="javascript:wave("+nums+")";
mWebView.loadUrl(javascript);
}
});
}

/**
* 由HTML页面调用,点击动态生成的button,
* @param num list序号
*/
public void show(int num){
System.out.println(num);
Person p=persons.get(num);
Toast.makeText(WebViewDemo.this, "姓名: "+p.name+"   年龄: "+p.age, Toast.LENGTH_SHORT).show();
};
}, "demo");

//加载本地html页面
mWebView.loadUrl("file:///android_asset/demo.html");
}
}

本地Html页面代码为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script language="javascript">
function wave(no) {
var nums=parseInt(no)
var div1=document.getElementById("div1");
for(var i=0;i<nums;i++){
var newButton=document.createElement("input");
newButton.setAttribute("type","button");
newButton.setAttribute("name",i);
var buttonValue="第"+(i+1)+"个按钮"
newButton.setAttribute("value",buttonValue);
var newString="demo.show("+i+");";
newButton.setAttribute("onclick",newString);
var br=document.createElement("br");

div1.appendChild(newButton);
div1.appendChild(br);
}
document.getElementById("droid").value=no;
//alert("hello world");
}
</script>
<body>
<input type="button" onClick="demo.clickOnAndroid()" value="Click Me">

<input id="droid" value="hello"/>

<a > <img id="dddd" src="./res/drawable-mdpi/ic_launcher.png"/>
webview中使用本地图片
</a>

<div id="div1"></div>
</body>
</html>

整个demo源码下载地址为:
源码下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航