Android通過使用webview實現和js的互動
阿新 • • 發佈：2019-01-11
通過webview可以載入本地文字資料或者網路資料，實現類似於瀏覽器的功能
public class MainActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv_browser = (WebView)findViewById(R.id.wv_brouse);
WebView控制元件的其他方法：
// 觸控焦點起作用（如果不設定，則在點選網頁文字輸入框時，不能彈出軟鍵盤及不響應其他的一些事件）mWebView.requestFocus();// 取消滾動條mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);// 允許網頁縮放settings().setSupportZoom(true);// 把圖片載入放在最後來載入渲染mWebView.getSettings().setBlockNetworkImage(true);回退WebView的載入層級，而不是退出Activity@Overridepublicboolean onKeyDown(int keyCode,KeyEvent event){// 是否按下返回鍵，且WebView現在的層級，可以返回if((keyCode ==KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack()){// 返回WebView的上一頁面 mWebView.goBack();returntrue;}returnfalse;}mWebView.setWebViewClient(newWebViewClient(){/** * 給WebView加一個事件監聽物件（WebViewClient)並重寫shouldOverrideUrlLoading， * 當按下某個連線時WebViewClient會呼叫這個方法並傳遞引數 */@Overridepublicboolean shouldOverrideUrlLoading(WebView view,String url){// 此處可新增一些邏輯：是否攔截此url，自行處理// 下方2行程式碼是指在當前的webview中跳轉到新的url view.loadUrl(url);returntrue;}});//在WebView開始載入時，顯示進度框；載入完畢時，隱藏進度框mWebView.setWebViewClient(newWebViewClient(){/** * WebView載入url完成時，會回撥此api，可在這個api中隱藏載入進度框 */@Overridepublicvoid onPageFinished(WebView view,String url){// 此處可新增一些邏輯：隱藏載入進度框}/** * WebView開始載入url時，會回撥此api，可在這個api中顯示載入進度框 */@Overridepublicvoid onPageStarted(WebView view,String url,Bitmap favicon){// 此處可新增一些邏輯：顯示載入進度框}});
WebSettings常用API：
|
方法 |
說明 |
|
setAllowFileAccess |
啟用或禁用WebView訪問檔案資料 |
|
setBlockNetworkImage |
是否顯示網路影象 |
|
setBuiltInZoomControls |
設定是否支援縮放 |
|
setCacheMode |
設定緩衝的模式 |
|
setDefaultFontSize |
設定預設的字型大小 |
|
setDefaultTextEncodingName |
設定在解碼時時候用的預設編碼 |
|
setFixedFontFamily |
設定固定使用的字型 |
|
setJavaScriptEnabled |
設定是否支援Javascript |
|
setLayoutAlgorithm |
設定佈局方式 |
|
setLightTouchEnabled |
設定用滑鼠啟用被選項 |
|
setSupportZoom |
設定是否支援變焦 |
WebViewClient 常用API：
|
方法 |
說明 |
|
doUpdateVisitedHistory |
更新歷史記錄 |
|
onFormResubmission |
應用程式重新請求網頁資料 |
|
onLoadResource |
載入指定地址提供的資源 |
|
onPageFinished |
網頁載入完畢 |
|
onPageStarted |
網頁開始載入 |
|
onReceivedError |
報告錯誤資訊 |
|
onScaleChanged |
WebView發生改變 |
|
shouldOverrideUrlLoading |
控制新的連線在當前WebView中開啟 |
WebChromeClient常用API
|
方法 |
說明 |
|
onCloseWindow |
關閉WebView |
|
onCreateWindow |
建立WebView |
|
onJsAlert |
處理Javascript中的Alert對話方塊 |
|
onJsConfirm |
處理Javascript中的Confirm對話方塊 |
|
onJsPrompt |
處理Javascript中的Prompt對話方塊 |
|
onProgressChanged |
載入進度條改變 |
|
onReceivedlcon |
網頁圖示更改 |
|
onReceivedTitle |
網頁Title更改 |
|
onRequestFocus WebView |
顯示焦點 |
實現Android程式碼和JS互調
1、Android程式碼與JS互動的大前提：// 啟用WebView對JavaScript的支援mWebView.getSettings().setJavaScriptEnabled(true);
2、Android程式碼呼叫JS
// WebView呼叫JS程式碼非常簡單，直接呼叫loadUrl，載入JS方法即可：mWebView.loadUrl("javascript:javacalljs()");
// Java呼叫JS並傳遞引數String content ="hello js, form Android code!";mWebView.loadUrl("javascript:javacalljswithargs('"+ content +"')");
HTML頁面中的JS程式碼：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><scripttype="text/javascript">function javacalljs(){ document.getElementById("content").innerHTML +="<br\>java呼叫了js函式";}function javacalljswithargs(arg){ document.getElementById("content").innerHTML +=("<br\>"+arg);}</script></head>
3、JS呼叫Android程式碼
①實現一個class，並在其中新增對應的方法，供JS呼叫：
//Js呼叫的JavascriptInterfacepublicclassTestInterface{/** * 因為安全問題，在Android4.2以後(如果應用的android:targetSdkVersion數值為17+) * JS只能訪問帶有 @JavascriptInterface註解的Java函式。 */@JavascriptInterfacepublicvoid startCall(){Intent intent =newIntent(); intent.setAction(Intent.ACTION_DIAL); intent.setData(Uri.parse("tel:"+10086)); startActivity(intent);}@JavascriptInterfacepublicvoid showToast(String msg){Toast.makeText(mContent,"js呼叫了java函式並傳遞了引數："+ msg,0).show();}}
②呼叫WebView的addJavascriptInterface()方法，設定JS回撥的物件:
mWebView.addJavascriptInterface(newTestInterface(),"testInterface");// 第二個引數是一個別名
③HTML頁面中的JS程式碼，回撥Android程式碼的方式為：window.別名.方法名
<aonClick="window.testInterface.startCall()">點選撥打10086</a><br/><aonClick="window.testInterface.showToast('我彈了一個Toast')">點選彈出Toast</a>