Android中使用WebView與JS互動全解析

標籤：處理   dial   url   動作   擷取   行修改   監聽   頁面配置   ati   

　　1.概述首先，需要提出一個概念，那就是hybrid，主要意思就是native原生Android和h5混合開發。為什麼要這樣做呢？大家可以想象一下針對於同一個活動，如果使用純native的開發方式，Android和iOS兩邊都要維護同一套介面甚至是邏輯，這樣開發和維護的成本會很大，而使用hybrid的開發方式的話，讓前端的同學去寫一套介面和邏輯，對於native端來說只要使用對應的容器去展示就可以了(對於Android來說這個容器當然就是WebView)。那為什麼不所有的頁面都使用這種方式開發呢？因為使用h5來展示介面的話使用者體驗始終是不如native的，所以在這兩者之間我們需要一個權衡。
　　
　　介紹完了何為hybrid，我們來思考下面幾個情境:情境1:前端那邊的頁面有一個按鈕，點擊這個按鈕需要顯示一個native的組件(比如一個toast)，或者點擊這個按鈕需要去在native端執行一個耗時的任務。
　　
　　情境2:還是前端頁面有一個按鈕，點擊這個按鈕的邏輯是：如果登入了，則跳轉到相應的介面，如果沒有登入，則跳轉到登入介面。而這個登入介面是我們native維護的。
　　
　　看完上面兩個情境，相信大家也發現了一個問題，hybrid這樣的開發方式有一個問題需要解決，那就是前端和本地的通訊。
　　
　　下面將會給大家介紹active原生Android和h5之間的通訊方式。
　　
　　2.如何使用使用WebView控制項 與其他控制項的使用方法相同 在layout中使用一個”WebView”標籤不包括導覽列，地址欄等完整瀏覽器功能，只用於顯示一個網頁在WebView中載入Web頁面，使用這裡寫圖片描述注意在ma www.sratchina.com nifest檔案中加入訪問互連網的許可權：11但是，在Android中點擊一個連結，預設是調用手機上已經安裝的瀏覽器程式來啟動，因此想要通過WebView代為處理這個動作 ，那麼需要通過這裡寫圖片描述當然，我們也可以寫一個類繼承WebViewClient來對WebViewClient對象進行擴充這裡寫圖片描述然後只需要將setWebViewClient的內容進行修改即可這裡寫圖片描述另外出於使用者習慣上的考慮 需要將WebView表現得更像一個瀏覽器，也就是需要可以回退記錄，因此需要覆蓋系統的回退鍵 goBack，goForward可向前向後瀏覽曆史頁面這裡寫圖片描述例子1：WebViewClient的使用布局代碼activity_main.xml：10.
　　
　　15.
　　
　　12345678910111213141516171234567891011121314151617代碼：2.
　　
　　4.
　　
　　9.
　　
　　擷取webview控制項設定使用webview載入頁面16.
　　
　　18.
　　
　　24.
　　
　　30.
　　
　　35.
　　
　　37.
　　
　　39.
　　
　　覆蓋系統的回退鍵47.
　　
　　50.
　　
　　12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152531234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253和java的相互調用用處非常大,通過可以使用Android原生的JavascriptInterface來進行js和Java的通訊。
　　
　　例子2：JavaScript和java的相互調用首先我們寫一段html代碼：5.
　　
　　9.
　　
　　20.
　　
　　123456789101112131415161718192021www.boyuanyl.cn2223242512345678910111213141516171819202122232425這是一個很簡單的HTML5頁面，裡面有一個button，點擊這個button就執行js指令碼中的showToast方法。
　　
　　這裡寫圖片描述那麼這個showToast方法做了什麼呢？
　　
　　這裡寫圖片描述可以看到control.showToast，這個是什麼我們後面再說，下面看我們Android工程中的java代碼。
　　
　　編寫布局檔案布局的內容很簡單，就是嵌套一個WebView控制項這裡寫圖片描述編寫MainActivity.java代碼2.
　　
　　13.
　　
　　15.
　　
　　17.
　　
　　擷取webview控制項擷取WebView的設定將JavaScript設定為可用，這一句話是必須的，不然所做一切都是徒勞的給webview添加JavaScript介面通過webview載入html頁面32.
　　
　　42.
　　
　　46.
　　
　　1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515212345678910111213141516171819202122232425262728www.gouyily.cn29303132333435363

www.boshenyl.cn

7383940414243444546474849505152上面的代碼主要做了以下的步驟：a) 擷取webview控制項b) 擷取webview的設定，將JavaScript設定為可用，開啟JavaScript的通道這裡寫圖片描述c) 在Android程式中建立介面 ，並編寫相關邏輯再去看之前js指令碼中的那個showToast()方法這裡寫圖片描述這裡的control就是我們的那個interface，調用了interface的show方法，很明顯這裡是js調用了Android的代碼，輸出了一個這裡寫圖片描述可以看到這個interface我們給它取名叫control，最後通過loadUrl載入頁面。
　　
　　這裡寫圖片描述可以看到先顯示一個toast，然後調用log()方法，log()方法裡調用了js指令碼的log()方法, js的log()方法做的事就是在控制台輸出msg,這裡明顯是Android調用了js的方法。
　　
　　這裡寫圖片描述d) 給webview添加我們自己編寫的JavaScript介面通過WebView的addJavascriptInterface方法去注入一個我們自己寫的interface。
　　
　　這裡寫圖片描述e) 使用webview控制項載入我們之前編寫的html檔案這裡寫圖片描述在真實手機上運行程式，在控制台成功輸出內容:這裡寫圖片描述這樣我們就完成了js和java的互調，是不是很簡單。
　　
　　中處理JS的警告，對話方塊等在Android中處理JS的警告，對話方塊等需要對WebView設定WebChromeClient對象,並複寫其中的onJsAlert，onJsConfirm，onJsPrompt方法可以處理javascript的常用對話方塊例子3：在Android中處理javascript的對話方塊1) 編寫html頁面配置分別測試javascript的三種對話方塊這是一個警告對話方塊！");更多資訊請到我的部落格去？"))
　　
　　你選擇了不去！");示範一個帶輸入的對話方塊","這裡輸入你的資訊");謝謝使用，你輸入的是：下面我們示範3種對話方塊</p>警告、提醒對話方塊</p>提交帶選擇的對話方塊</p>提交要求使用者輸入的對話方塊</p>提交1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484912345678910111213141516171819202122232425262728293031323334353637383940414243444546474849頁面效果：這裡寫圖片描述中布局的編寫請輸入網址"/>串連" />123456789101112131415161718192021222324252627282930313212345678910111213141516171819202122232425262728293031323) 編寫自訂對話方塊的布局建立prom_dialog.xml檔案，在其中自訂一個帶輸入的對話方塊由TextView和EditText構成12345678910111213141516171819123456789101112131415161718194) 擷取WebView控制項，並進行相關的設定這裡寫圖片描述5) 複寫onKeyDown方法，當使用者按返回鍵時，返回上一個載入的頁面這裡寫圖片描述6) 給WebView設定setWebChromeClient，並複寫其中的方法設定3.
　　
　　處理javascript中的構建一個Builder來顯示網頁中的對話方塊提示對話方塊");14.
　　
　　點擊確定按鈕之後,繼續執行網頁中的操作25.
　　
　　30.
　　
　　36.
　　
　　38.
　　
　　40.
　　
　　處理javascript中的帶選擇的對話方塊");65.
　　
　　處理javascript中的為網頁中對話方塊的提示內容在沒有輸入時，預設顯示的內容自訂一個帶輸入的對話方塊由TextView和EditText構成77.
　　
　　設定TextView對應網頁中的提示資訊設定EditText對應網頁中的輸入框構建一個Builder來顯示網頁中的對話方塊設定彈出框標題帶輸入的對話方塊");設定彈出框的布局設定按鍵的監聽93.
　　
　　97.
　　
　　點擊確定之後，取得輸入的值，傳給網頁處理104.
　　
　　106.
　　
　　109.
　　
　　117.
　　
　　126.
　　
　　設定網頁載入的進度條133.
　　
　　139.
　　
　　142.
　　
　　取得編輯框中我們輸入的內容判斷輸入的內容是不是網址裝載網址

Android中使用WebView與JS互動全解析