標籤：webview js互動 addjavascriptinterfa ywebview.loadurljava
近期做一個項目需要把一個 服務支援的介面用webview來顯示..呀 html白雪了js更是一樣啥也不會，相信很多初學屌絲員跟我一樣,,
html開發工具都不知道怎麼寫..哈哈哈.....現在把做完的結果分享一下先了
,,
這是從項目中特意分離出來的demo這裡之上一些關鍵代碼
源碼 http://download.csdn.net/download/yung7086/7554309
步驟 首先在assets目錄下建一個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/xhtml; charset=utf-8" /> <script type="text/javascript">function createTable(phon){ var table = document.getElementById("table"); var arrya=phon.split(";"); var rowindex=0; for(var i=0;i<arrya.length;i++){ var child= arrya[i].split(","); var row = table.insertRow(rowindex);//建立一行 rowindex+=1; var cell1 = row.insertCell();//建立一個單元 cell1.innerHTML=child[0]; var cell2 = row.insertCell();//建立一個單元 cell2.innerHTML="("+i+")"; for(var n=1;n<child.length;n++){ var row = table.insertRow(rowindex);//建立一行 rowindex+=1; var cell1 = row.insertCell();//建立一個單元 if(i==0){ cell1.innerHTML= "<a href='javascript:Android.callPhone(\""+child[n]+"\")'>" +child[n]; }else if(i==1){ cell1.innerHTML= "<img src=\"file:///android_asset/qqicon.png\" height=\"14\" width=\"16\" > "+ "<a href='javascript:Android.callQQ(\""+child[n]+"\")'>" +child[n]; }else if(i==2){ cell1.innerHTML= "<img src=\"file:///android_asset/wxicon.png\" height=\"12\" width=\"16\" > "+ "<a href='javascript:Android.callWeixin(\""+child[n]+"\")'>" +child[n]; } var cell2 = row.insertCell(); } } } </script> </head> <body> <font color="#0099FF" size="5"> 服務支援</font> </p><table id="table" ></table></p></p></p></p></p> <font color="#233fF1" size="2"> PS:</p>以上串連可以點擊進入QQ或者程式，介面的電話號碼QQ號碼都是從伺服器擷取，擷取的資料直接儲存在應用的私人目錄下，然後從該目錄取出資料通過java類調用js填充到html上，html根據綁定的java對象調用java類的方法實現撥打到電話，， 轉載請標明出處</p> 尊重作者 @author yung7086 </p> 2014年6月26日 11:25:46</font> </body></html>
玩這個都玩了好久應為直接是eclipse開發 寫一個function寫了N遍老師少了逗號大括弧還不報錯。。。。鬱悶的求推薦html+js的開發工具
算了還是整片的貼出來吧..html需要調用撥打到電話這些功能就需要調用java類了這裡我就需要定義一個java類實現html需要調用的方法
package com.example.jsdemo;import android.content.ComponentName;import android.content.Context;import android.content.Intent;import android.content.pm.ApplicationInfo;import android.content.pm.PackageManager;import android.content.pm.PackageManager.NameNotFoundException;import android.net.Uri;import android.webkit.JavascriptInterface;/** * JS的調用的方法 * * @author yung * <p> * 2014年6月24日 09:26:14 * <p> * 此類中的開啟的QQ 和是直接通過包名和類名調用雖然QQ包名不容易變 但是主介面好事可能會變 * 如果發現打不開QQ應用可以查看是否是QQ升級更改了類名 */public class AndroidJavaScript {Context c;String[] qqpackage = new String[] { "com.tencent.mobileqq","com.tencent.mobileqq.activity.SplashActivity" };String[] wxpackage = new String[] { "com.tencent.mm","com.tencent.mm.ui.LauncherUI" };public AndroidJavaScript(Context c) {this.c = c;}@JavascriptInterfacepublic void callPhone(final String telphone) {Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ telphone));c.startActivity(intent);}@JavascriptInterfacepublic void callQQ(String qq) {// 實現調用電話號碼if (!checkBrowser(qqpackage[0])) {} else {Intent intent = new Intent();ComponentName cmp = new ComponentName(qqpackage[0], qqpackage[1]);intent.setAction(Intent.ACTION_MAIN);intent.addCategory(Intent.CATEGORY_LAUNCHER);intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);intent.setComponent(cmp);c.startActivity(intent);}}@JavascriptInterfacepublic void callWeixin(String weixin) {if (!checkBrowser(wxpackage[0])) {} else {Intent intent = new Intent();ComponentName cmp = new ComponentName(wxpackage[0], wxpackage[1]);intent.setAction(Intent.ACTION_MAIN);intent.addCategory(Intent.CATEGORY_LAUNCHER);intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);intent.setComponent(cmp);c.startActivity(intent);}}// 擷取在webview上擷取js產生的html的源碼@JavascriptInterfacepublic void getSource(String htmlstr) {// Log.e("html", htmlstr);// String path = c.getFilesDir().getAbsolutePath() + "/serve.html"; //// data/data目錄} //檢測包名的應用是否已經安裝在手機public boolean checkBrowser(String packageName) {if (packageName == null || "".equals(packageName))return false;try {ApplicationInfo info = c.getPackageManager().getApplicationInfo(packageName, PackageManager.GET_UNINSTALLED_PACKAGES);return true;} catch (NameNotFoundException e) {return false;}}}現在有了方法有了html就差怎麼調用了這樣記得設定webview必要是參數
myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");
你是否發現html的js方法裡面有醬紫的語句
<a href=‘javascript:Android.callWeixin(\""+child[n]+"\")‘>"
確實這裡面的”Android和“myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");必須相同哦..
這裡注意雙引號哈
WebSettings webSettings = myWebView.getSettings();webSettings.setJavaScriptEnabled(true);isExistsHTML();// myWebView.loadUrl("file:///android_asset/ss.html");String path = getFilesDir().getAbsolutePath() + HTMLNAME; // data/data目錄myWebView.loadUrl("file:///" + path);myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");// myWebView.loadUrl("javascript:getStr('" + 122222 + "')");myWebView.setWebViewClient(webviewcilnt);
下面說說 我這些QQ號和電話是從伺服器擷取的怎麼添加到html上去。。這就是js的任務了
你看到我的html是沒有什麼布局，資料都是js產生出來的介面，。
怎麼從java傳到js裡面呢 ？在java裡面寫myWebView.loadUrl("javascript:createTable(‘" + phon + "‘)");啦.
createTable（”“）；就是js的function名字.記住這個myWebView.loadUrl("javascript:createTable(‘" + phon + "‘)")
在onCreate加應該是不行的需要醬紫
myWebView.setWebViewClient(webviewcilnt);WebViewClient webviewcilnt = new WebViewClient() {@Overridepublic void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);String phon = loadHTMLData();myWebView.loadUrl("javascript:createTable('" + phon + "')");// 擷取webview載入的html頁面view.loadUrl("javascript:window.Android.getSource('<html>'+"+ "document.getElementsByTagName('html')[0].innerHTML+'</html>');");}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);}};
尊重作者 yung7086
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
