2. 程式人生 > >安卓webview和js+html互動利用的addJavascriptInterface和webview.loadUrl("javascript:**");

安卓webview和js+html互動利用的addJavascriptInterface和webview.loadUrl("javascript:**");

阿新 • • 發佈：2019-02-05

近期做一個專案需要把一個 服務支援的介面用webview來顯示..呀 html白雪了js更是一樣啥也不會，相信很多初學屌絲員跟我一樣,,

html開發工具都不知道怎麼寫..哈哈哈.....現在把做完的結果分享一下先上圖了

,,

這是從專案中特意分離出來的demo這裡之上一些關鍵程式碼

步驟 首先在assets目錄下建一個html檔案

[html] view plain copy print?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.   <head>
  4.         <metahttp-equiv="Content-Type"content="text/xhtml; charset=utf-8"/>
  5. <scripttype="text/javascript">
  6. function createTable(phon){   
  7.    var table = document.getElementById("table");   
  8.    var arrya=phon.split(";");  
  9.    var rowindex=0;  
  10.   for(var i=0;i<arrya.length
    ;i++){  
  11.          var  child= arrya[i].split(",");  
  12.          var row = table.insertRow(rowindex);//建立一行   
  13.          rowindex+=1;  
  14.          var cell1 = row.insertCell();//建立一個單元   
  15.          cell1.innerHTML=child[0];  
  16.           var cell2 = row.insertCell();//建立一個單元   
  17.          cell2.innerHTML="("+i+")";  
  18.         for(var n
    =1;n<child.length;n++){  
  19.              var row = table.insertRow(rowindex);//建立一行   
  20.              rowindex+=1;  
  21.              var cell1 = row.insertCell();//建立一個單元   
  22.            if(i==0){  
  23.               cell1.innerHTML= "<a href='javascript:Android.callPhone(\""+child[n]+"\")'>" +child[n];   
  24.            }else if(i==1){  
  25.              cell1.innerHTML= "<img src=\"file:///android_asset/qqicon.png\" height=\"14\" width=\"16\" > "+ "<ahref='javascript:Android.callQQ(\""+child[n]+"\")'>" +child[n];   
  26.            }else if(i==2){  
  27.              cell1.innerHTML= "<img src=\"file:///android_asset/wxicon.png\" height=\"12\" width=\"16\" > "+ "<ahref='javascript:Android.callWeixin(\""+child[n]+"\")'>" +child[n];   
  28.            }  
  29.            var cell2 = row.insertCell();  
  30.          }  
  31.      }  
  32.  }   
  33. </script>
  34.  </head>
  35.  <body>
  36.  <fontcolor="#0099FF"size="5"> 服務支援</font></p>
  37. <tableid="table">
  38. </table>
  39. </p></p></p></p></p>
  40.  <fontcolor="#233fF1"size="2">
  41.  PS:</p>
  42. 以上連線可以點選進入QQ或者微信程式，介面的電話號碼QQ號碼都是從伺服器獲取，獲取的資料直接儲存在應用的私有目錄下，然後從該目錄取出資料通過java類呼叫js填充到html上，html根據繫結的java物件呼叫java類的方法實現撥打電話，， 轉載請標明出處  
  43. </p> 尊重作者 @author yung7086   
  44. </p> 2014年6月26日 11:25:46</font>
  45.  </body>
  46. </html>

玩這個都玩了好久應為直接是eclipse開發 寫一個function寫了N遍老師少了逗號大括號還不報錯。。。。鬱悶的求推薦html+js的開發工具

算了還是整片的貼出來吧..html需要呼叫撥打電話這些功能就需要呼叫Java類了這裡我就需要定義一個java類實現html需要呼叫的方法

[java] view plain copy print?
  1. package com.example.jsdemo;  
  2. import android.content.ComponentName;  
  3. import android.content.Context;  
  4. import android.content.Intent;  
  5. import android.content.pm.ApplicationInfo;  
  6. import android.content.pm.PackageManager;  
  7. import android.content.pm.PackageManager.NameNotFoundException;  
  8. import android.net.Uri;  
  9. import android.webkit.JavascriptInterface;  
  10. /** 
  11.  * JS的呼叫的方法 
  12.  *  
  13.  * @author yung 
  14.  *         <p> 
  15.  *         2014年6月24日 09:26:14 
  16.  *         <p> 
  17.  *         此類中的開啟的QQ 和微信是直接通過包名和類名呼叫雖然QQ微信包名不容易變 但是主介面好事可能會變 
  18.  *         如果發現打不開QQ微信應用可以檢視是否是QQ微信升級更改了類名 
  19.  */
  20. publicclass AndroidJavaScript {  
  21.     Context c;  
  22.     String[] qqpackage = new String[] { "com.tencent.mobileqq",  
  23.             "com.tencent.mobileqq.activity.SplashActivity" };  
  24.     String[] wxpackage = new String[] { "com.tencent.mm",  
  25.             "com.tencent.mm.ui.LauncherUI" };  
  26.     public AndroidJavaScript(Context c) {  
  27.         this.c = c;  
  28.     }  
  29.     @JavascriptInterface
  30.     publicvoid callPhone(final String telphone) {  
  31.         Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"
  32.                 + telphone));  
  33.         c.startActivity(intent);  
  34.     }  
  35.     @JavascriptInterface
  36.     publicvoid callQQ(String qq) {  
  37.         // 實現呼叫電話號碼
  38.         if (!checkBrowser(qqpackage[0])) {  
  39.         } else {  
  40.             Intent intent = new Intent();  
  41.             ComponentName cmp = new ComponentName(qqpackage[0], qqpackage[1]);  
  42.             intent.setAction(Intent.ACTION_MAIN);  
  43.             intent.addCategory(Intent.CATEGORY_LAUNCHER);  
  44.             intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
  45.             intent.setComponent(cmp);  
  46.             c.startActivity(intent);  
  47.         }  
  48.     }  
  49.     @JavascriptInterface
  50.     publicvoid callWeixin(String weixin) {  
  51.         if (!checkBrowser(wxpackage[0])) {  
  52.         } else {  
  53.             Intent intent = new Intent();  
  54.             ComponentName cmp = new ComponentName(wxpackage[0], wxpackage[1]);  
  55.             intent.setAction(Intent.ACTION_MAIN);  
  56.             intent.addCategory(Intent.CATEGORY_LAUNCHER);  
  57.             intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
  58.             intent.setComponent(cmp);  
  59.             c.startActivity(intent);  
  60.         }  
  61.     }  
  62.     // 獲取在webview上獲取js生成的html的原始碼
  63.     @JavascriptInterface
  64.     publicvoid getSource(String htmlstr) {  
  65.         // Log.e("html", htmlstr);
  66.         // String path = c.getFilesDir().getAbsolutePath() + "/serve.html"; //
  67.         // data/data目錄
  68.     }  
  69.         //檢測包名的應用是否已經安裝在手機
  70.     publicboolean checkBrowser(String packageName) {  
  71.         if (packageName == null || "".equals(packageName))  
  72.             returnfalse;  
  73.         try {  
  74.             ApplicationInfo info = c.getPackageManager().getApplicationInfo(  
  75.                     packageName, PackageManager.GET_UNINSTALLED_PACKAGES);  
  76.             returntrue;  
  77.         } catch (NameNotFoundException e) {  
  78.             returnfalse;  
  79.         }  
  80.     }  
  81. }  
現在有了方法有了html就差怎麼呼叫了這樣記得設定webview必要是引數

myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");

你是否發現html的js方法裡面有醬紫的語句

<a href='JavaScript:Android.callWeixin(\""+child[n]+"\")'>"

確實這裡面的”Android和“myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");必須相同哦..

這裡注意雙引號哈

[java] view plain copy print?
  1. WebSettings webSettings = myWebView.getSettings();  
  2.         webSettings.setJavaScriptEnabled(true);  
  3.         isExistsHTML();  
  4.         // myWebView.loadUrl("file:///android_asset/ss.html");
  5.         String path = getFilesDir().getAbsolutePath() + HTMLNAME; // data/data目錄
  6.         myWebView.loadUrl("file:///" + path);  
  7.         myWebView.addJavascriptInterface(new AndroidJavaScript(this), "Android");  
  8.         // myWebView.loadUrl("javascript:getStr('" + 122222 + "')");
  9.         myWebView.setWebViewClient(webviewcilnt);  

好把這裡就解決了html裡面呼叫java類實現的方法，，

下面說說 我這些QQ號和電話是從伺服器獲取的怎麼新增到html上去。。這就是js的任務了

你看到我的html是沒有什麼佈局，資料都是js生成出來的介面，。

怎麼從java傳到js裡面呢  ？在java裡面寫myWebView.loadUrl("javascript:createTable('" + phon + "')");啦.

createTable（”“）；就是js的function名字.記住這個myWebView.loadUrl("javascript:createTable('" + phon + "')")

在onCreate加應該是不行的需要醬紫

[java] view plain copy print?
  1. myWebView.setWebViewClient(webviewcilnt);  
  2. ebViewClient webviewcilnt = new WebViewClient() {  
  3.     @Override
  4.     publicvoid onReceivedError(WebView view, int errorCode,  
  5.             String description, String failingUrl) {  
  6.     }  
  7.     @Override
  8.     publicvoid onPageFinished(WebView view, String url) {  
  9.         super.onPageFinished(view, url);  
  10.         String phon = loadHTMLData();  
  11.         myWebView.loadUrl("javascript:createTable('" + phon + "')");  
  12.         // 獲取webview載入的html頁面
  13.         view.loadUrl("javascript:window.Android.getSource('<html>'+"
  14.                 + "document.getElementsByTagName('html')[0].innerHTML+'</html>');");  
  15.     }  
  16.     @Override
  17.     publicvoid onPageStarted(WebView view, String url, Bitmap favicon) {  
  18.         super.onPageStarted(view, url, favicon);  
  19.     }  
  20. };  

等待webview初始化html完成之後在呼叫js呵呵就這樣

轉自 http://blog.csdn.net/yung7086/article/details/34824167/

更新：在android 4.4.2以上，應該使用evaluateJavascript呼叫js程式碼，在回撥函式中處理返回函式結果。

webView.evaluateJavascript(script, new ValueCallback<String>() {
    @Override
public void onReceiveValue(String s) {
        LOGGER.info("onReceiveValue: " + s);
    }
});

相關推薦

安卓webview和js+html互動利用的addJavascriptInterface和webview.loadUrl("javascript:**");

近期做一個專案需要把一個 服務支援的介面用webview來顯示..呀 html白雪了js更是一樣啥也不會，相信很多初學屌絲員跟我一樣,, html開發工具都不知道怎麼寫..哈哈哈.....現在把做完的結果分享一下先上圖了 ,, 這是從專案中特意分離出來的demo這裡之上一些

js和安卓app互相傳資料（安卓app頁面整合html頁面，獲取資料並給安卓返回資料）

先上Demo：<!DOCTYPE html><html><head>    <meta charset="utf-8"></head><body><button onclick="test()"&g

WebView與JS的互動和優化

一、與JS互動     1.直接使用html檔案、js檔案、圖片、佈局存放在本地assets或網路中                   2.在Main

Android通過使用webview實現和js的互動

通過webview可以載入本地文字資料或者網路資料，實現類似於瀏覽器的功能 public class MainActivity extends Activity{      @Override  

利用JPCT-AE在安卓裝置上進行*.obj檔案的載入和顯示

最近做一個專案，需要載入帶紋理的3d模型obj檔案並顯示出來，僅限於安卓平臺，因此需要一個輕量級的3d核心。 找了很多核心，要不就是太久沒更新不能用了，要不就是功能太複雜，後來找到了JPCT-AE，網上的文件相當少，但經過自己研究了兩天，終於成功完成了obj模型的載入和顯示

iOS webView和JS簡單互動處理

首先  url = @"http://42.96.155.42:8080/crm/loginRelationServlet?openId=A786D29EBAD81123313619A2F19B9447&accessToken=8F796D79CE14E4C5A7

iOS中WebView和JS的互動

從iOS7開始 蘋果公佈了JavaScriptCore.framework 它使得JS與OC的互動更加方便了。 下面我們就簡單瞭解一下這個框架 首先我匯入framework 方法如下 點選Linked Frameworks and Libraries 的新增後

安卓2.3 js解析問題 split()

return bsp ace cti 2.3 space 安卓 string arr 安卓2.3版本號解析錯誤，split和parseInt都會把09和08都解析成0,07下面解析沒有問題。解決的方法是直接取個位數。 function getYMD(yMd){

小白學安卓（一）：Android系統架構和應用開發特色

一、Android架構 Android大致可以分為四層架構： Linux核心層 系統執行庫層 應用框架層 應用層 Linux核心層 Android系統是基於Linux核心的，這一層為Android裝置的各種硬體提供了底層的驅動，如顯示驅動

Kotlin安卓：實現okhttp3持續登入，同步到webview

經常用httpclient請求的的情況下，一般就是用jsoup解析，去爬資料，用okhttp3實現cookie的儲存。 這裡做的是用okhttp3實現登入請求，然後直接將登入後可訪問的頁面Cookie同步載入到webview裡面去。 將賬號與密碼儲存到shareP ···

安卓專案實戰之通用的PopupWindow封裝和使用

如何使用 1:背景變暗配置示例： //建立並顯示popWindow mCustomPopWindow= new CustomPopWindow.PopupWindowBuilder(this) .setView(

安卓UI練習（一）--登陸介面和邏輯程式碼

登陸介面和邏輯程式碼 最近感覺自己安卓方面真的的差的好多，，，但是我覺得自己只有好好每天學習敲程式碼練習，會有收穫的，這周就是重新看了下安卓UI方面的東西，下面是登陸介面的xml和邏輯處理方面的程式碼//參考了好多別人的部落格 效果圖 圖示都是在網上找

安卓API21及以上版本，利用 MediaProjectionManager 截圖

0) 宣告 本文是根據 @goodbranch 的《Android 5.0及以上實現螢幕截圖 》，進行修改過之後，整理出來的。因作者未回覆私信，加之在不 root 的前提下用程式碼實現截圖著實不易，為了讓更多的人少走彎路，故編寫此文。如有冒犯，請及時提醒，以便

安卓微信自動搶紅包外掛優化和實現

轉載請註明作者AndroidMSky和連結http://blog.csdn.net/AndroidMsky/article/details/53490459 又是興趣系列 網上有很多自動強紅包的例子和程式碼，筆者也是做了一些優化。 先說說自己的兩個個優勢

安卓EditText--輸入框輸入內容設定可見和不可見

輸入框輸入內容設定可見和不可見 1、程式碼中設定編輯框設定內容不可見 edittext.setTransformationMethod(new PasswordTransformationMethod()); 可見： password.setTransformationMe

安卓螢幕程式碼適配螢幕心得px和dp;sp和dp選擇

特意想了解下dp這些單位的概念去發現更是凌亂 網上的說法太他嗎不一樣現在自己總結下子於是看到一些帖子真實千奇百怪  dp/dip (density-independent pixels)密度/裝置獨立畫素，不同裝置有不同的顯示效果,這個和裝置硬體有關，一般我們為了支援

安卓四大元件 之 Activity 之 任務棧和回收棧（Tasks and Back Stack）

本文摘要 |---Saving Activity State   |---Managing Tasks     |---Defining launch modes     |---Handling affinities     |---Clearing the back s

安卓單選對話方塊之帶確定和取消按鈕

安卓單選對話方塊很容易就寫好了： //... AlertDialog dialog = builder.setTitle(R.string.please_choose) .setSingleChoiceItems(itemS

ios webview與JS的互動

最近寫了一個與JS互動的程式，瞭解了下HTML ,HTML DOM,JS相關的知識 1.什麼是 DOM？ 通過 JavaScript，您可以重構整個 HTML 文件。您可以新增、移除、改變或重排頁面上的專案。 要改變頁面的某個東西，JavaScript 就需要獲

電腦（Linux/Windows）使用SSH遠端登入安卓（Android）手機實現無線傳輸和管理檔案（圖文詳解）

電腦（Linux/Windows系統）使用SSH遠端登入安卓（Android）手機實現無線傳輸和管理檔案（圖文詳解） 溫馨提示 本文只針對安卓（Android）手機！iPhone或者WP的手機使用者，請不要浪費時間在本文。 前言 在將And