html在android里的点击事件

来源：互联网发布：dnf改时装软件编辑：程序博客网时间：2024/05/02 12:55

以下实现的功能就是在anndroid中里的HTML网页里点击某一按钮或某一位置直接跳转某一Activty里去

1、制作一个HTML网页界面安装在android中

下面是一段HTML代码（婚庆界面）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>婚庆主页</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes"><!--<meta name="viewport" content="width=640, initial-scale=0.5,maximum-scale=0.5" />--><meta name="apple-mobile-web-app-capable" content="YES"><script>function yun(){window.musicServiceInterfaceName.startGridViewHttp();}function yun1(){window.musicServiceInterfaceName.playMusicss();}</script></head><style>.imgTop {width: 320px;margin-left: -10px;margin-right: -10px;min-height: 200px;position:relative;border-bottom:1px solid #ffeeac;}.imgTop .imgtop_bg{width: 100%;}.imgTop .imgtop_lb {padding-top: 10px;margin-left: 10px;position: absolute;left: 10px; top:10px;}.p3 {width: 118px;height: 22px;/* background-color: #ff6766; *//* margin: 10px; */padding: 20px;/* float: right;margin-top:110px; */position: absolute;right: 10px;bottom : 0px; background: url('../img/index_statusbarbg1.png') no-repeat right bottom;}.sp1 {font-size: 10px;color: #ffeeac;}.sp2 {font-size: 10px;color: #ffeeac;text-align: right;}.sp3 {font-size: 20px;}.imgShow {overflow: hidden;margin-left: -10px;margin-top: 14px;}.imgShow img {width: 145px;height: 110px;display: inline-block;float: left;margin-left: 10px;margin-bottom: 10px;}.footer {margin-top: 14px;text-align: center;}.footer a {color: #92192d;font-size: 14px;}.footer img {width: 20px;display: inline-block;position: relative;top: 2px;margin-left: 8px;}</style><body><div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;"><div class="imgTop"><img class="imgtop_bg" src="./img/index_top_bg.png" /> <img class="imgtop_lb"src="./img/index_microphone.png" /><h3 class="p3"><p class="sp1">离我们婚礼</p><p class="sp2">还有<span class="sp3">35</span>天</p></h3></div><div class="imgShow"><img src="./img/index_yaoqinghan.png" onclick="yun()"/> <img src="./img/index_zhufuqiang.png" onclick="yun1()"/> <img src="./img/index_yaoyiyao.png" /> <img src="./img/index_hunsha.png" /></div><div class="footer">   <a href="###">婚礼承办方:成都幸福公社婚庆公司<imgsrc="./img/redRightarrow.png" /></a></div></div></body></html>

2、创建Activty，在Activty的onCreate里实现三个步骤：

//第一步：webview支持script脚本WebSettings webSetting = mWebHtml.getSettings();webSetting.setJavaScriptEnabled(true);//第二步：定义交互类与方法final class ServiceJavaScriptInterface {ServiceJavaScriptInterface() {}public void startGridViewHttp() {//跳转到界面startActivity(new Intent(WebHtml.this, Gridmview.class));}}//第三步：添加script接口mWebHtml.addJavascriptInterface(new ServiceJavaScriptInterface(),"musicServiceInterfaceName");}

3、在head里写一个取名yun（任意取）的方法名：

function yun(){window.musicServiceInterfaceName.startGridViewHttp();}

4、这时必须在HTML里设置点击监听：

<div class="imgShow">

//点击图片<img src="./img/index_yaoqinghan.png" onclick="yun()"/>

实现以上几点就可以从HTML成功的跳转到Activty

如要实现其他跳转也是如此例如点击播放音乐（启动服务）。

0 0