html在android裡的點選事件
阿新 • • 發佈：2019-01-27
以下實現的功能就是在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="###">婚禮承辦方:成都幸福公社婚慶公司<img src="./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();
}<div class="imgShow">//點選圖片
<img src="./img/index_yaoqinghan.png" onclick="yun()"/> 如要實現其他跳轉也是如此例如點選播放音樂（啟動服務）。