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

来源：互联网发布：mac转视频格式编辑：程序博客网时间：2024/05/22 16:57

今天做的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源码下载地址为: 源码下载