Android WebView的使用方法及與JS 相互調(diào)用
1、添加網(wǎng)絡(luò)權(quán)限
<uses-permission android:name="android.permission.INTERNET" />
2、WebSettings 對訪問頁面進(jìn)行設(shè)置。
WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持獲取手勢焦點(diǎn),輸入用戶名、密碼或其他 mWebView.requestFocusFromTouch(); webSettings.setJavaScriptEnabled(true); //支持js webSettings.setUseWideViewPort(true); //將圖片調(diào)整到適合webview的大小 webSettings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小 webSettings.setSupportZoom(true); //支持縮放,默認(rèn)為true。是下面那個(gè)的前提。 webSettings.setBuiltInZoomControls(true); //設(shè)置內(nèi)置的縮放控件。 webSettings.setDisplayZoomControls(false); //隱藏原生的縮放控件 webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持內(nèi)容重新布局 webSettings.supportMultipleWindows(); //多窗口 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //關(guān)閉webview中緩存 webSettings.setAllowFileAccess(true); //設(shè)置可以訪問文件 webSettings.setNeedInitialFocus(true); //當(dāng)webview調(diào)用requestFocus時(shí)為webview設(shè)置節(jié)點(diǎn) webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通過JS打開新窗口 webSettings.setLoadsImagesAutomatically(true); //支持自動(dòng)加載圖片 webSettings.setDefaultTextEncodingName("utf-8");//設(shè)置編碼格式3、頁面加載方式
//加載一個(gè)網(wǎng)頁: mWebView.loadUrl(); //加載apk包中的一個(gè)html頁面 mWebView.loadUrl(); //加載手機(jī)本地的一個(gè)html頁面的方法: mWebView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");4、WebView 的兩個(gè)重要方法 WebViewClient 和 WebChromeClient
WebViewClient就是幫助WebView處理各種通知、請求事件的。
//打開網(wǎng)頁時(shí)不調(diào)用系統(tǒng)瀏覽器, 而是在本W(wǎng)ebView中顯示:mWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }});//將上面定義的webviewclinet設(shè)置給webview mWebView.setWebViewClient(webViewClient);下面介紹 WebView 的一些事件:
WebViewClient mWebViewClient = new WebViewClient() { shouldOverrideUrlLoading(WebView view, String url); //在網(wǎng)頁上的所有加載都經(jīng)過這個(gè)方法,這個(gè)函數(shù)我們可以做很多操作。 //比如獲取url,查看url.contains(“add”),進(jìn)行添加操作 shouldOverrideKeyEvent(WebView view, KeyEvent event); //重寫此方法才能夠處理在瀏覽器中的按鍵事件。 onPageStarted(WebView view, String url, Bitmap favicon) ; //這個(gè)事件就是開始載入頁面調(diào)用的,我們可以設(shè)定一個(gè)loading的頁面,告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。 onPageFinished(WebView view, String url); //在頁面加載結(jié)束時(shí)調(diào)用。同樣道理,我們可以關(guān)閉loading 條,切換程序動(dòng)作。 onLoadResource(WebView view, String url) ; // 在加載頁面資源時(shí)會(huì)調(diào)用,每一個(gè)資源(比如圖片)的加載都會(huì)調(diào)用一次。 onReceivedError(WebView view, int errorCode, String description, String failingUrl); // (報(bào)告錯(cuò)誤信息) doUpdateVisitedHistory(WebView view, String url, boolean isReload); //(更新歷史記錄) onFormResubmission(WebView view, Message dontResend, Message resend); //(應(yīng)用程序重新請求網(wǎng)頁數(shù)據(jù)) onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm); //(獲取返回信息授權(quán)請求) onReceivedSslError(WebView view, SslErrorHandler handler, SslError error); //重寫此方法可以讓webview處理https請求。 onScaleChanged(WebView view, float oldScale, float newScale); // (WebView發(fā)生改變時(shí)調(diào)用) onUnhandledKeyEvent(WebView view, KeyEvent event); //(Key事件未被加載時(shí)調(diào)用) }WebChromeClient是輔助WebView處理Javascript的對話框,網(wǎng)站圖標(biāo),網(wǎng)站title,加載進(jìn)度等。
WebChromeClient mWebChromeClient = new WebChromeClient() { //獲得網(wǎng)頁的加載進(jìn)度,顯示在右上角的TextView控件中 @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress < 100) { String progress = newProgress + "%"; } else { } } //獲取Web頁中的title用來設(shè)置自己界面中的title //當(dāng)加載出錯(cuò)的時(shí)候,比如無網(wǎng)絡(luò),這時(shí)onReceiveTitle中獲取的標(biāo)題為 找不到該網(wǎng)頁, //因此建議當(dāng)觸發(fā)onReceiveError時(shí),不要使用獲取到的title @Override public void onReceivedTitle(WebView view, String title) { MainActivity.this.setTitle(title); } @Override public void onReceivedIcon(WebView view, Bitmap icon) { // } @Override public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) { // return true; } @Override public void onCloseWindow(WebView window) { } //處理alert彈出框,html 彈框的一種方式 @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { // return true; } //處理confirm彈出框 @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { // return true; } //處理prompt彈出框 @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { // return true; }}; //同樣,將上面定義的WebChromeClient設(shè)置給WebView:webView.setWebChromeClient(mWebChromeClient);5、調(diào)用 JS 代碼
WebSettings webSettings = mWebView .getSettings(); webSettings.setJavaScriptEnabled(true);//這里必須設(shè)置 mWebView.addJavascriptInterface(new InsertObj(), "jsObj");
以下方法是 Android 和 JS 的交互
public class InsertObj extends Object { private static Activity mActivity; private static WebView mWebView; public InsertObj(Activity activity, WebView webView) { mActivity = activity; mWebView = webView; } //給html提供的方法,js中可以通過:var str = window.jsObj.HtmlcallJava(); 獲取到 @JavascriptInterface public String HtmlcallJava() { return "Html call Java"; } //給html提供的有參函數(shù) : window.jsObj.HtmlcallJava2("IT-homer blog"); @JavascriptInterface public String HtmlcallJava2(final String result) { return "Html call Java : " + result; } //Html給我們提供的函數(shù) @JavascriptInterface public static void JavacallHtml() { mActivity.runOnUiThread(new Runnable() { @Override public void run() { //這里是調(diào)用方法 mWebView.loadUrl("javascript: showFromHtml()"); Toast.makeText(mActivity, "clickBtn", Toast.LENGTH_SHORT).show(); } }); } //Html給我們提供的有參函數(shù) @JavascriptInterface public static void JavacallHtml2(final String param) { mActivity.runOnUiThread(new Runnable() { @Override public void run() { mWebView.loadUrl("javascript: showFromHtml2('"+param+"')"); Toast.makeText(mActivity, "clickBtn2", Toast.LENGTH_SHORT).show(); } }); }}<!DOCTYPE html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>無標(biāo)題 1</title><script type="text/javascript"> function HtmlcallJava(){ var str = window.jsObj.HtmlcallJava(); alert(str); } function HtmlcallJava2(){ var str = window.jsObj.HtmlcallJava2("HTML"); alert(str); } function showFromHtml() { alert("我是js方法,我被Android后臺調(diào)用"); } function showFromHtml2(result) { alert("我是js方法,我被Android后臺調(diào)用 "+result); } </script></head><body><button onclick="HtmlcallJava()">HtmlcallJava</button><button onclick="HtmlcallJava2()">HtmlcallJava2</button></body></html>6、WebView 返回鍵
public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event);}感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持,如有疑問請留言或者到本站社區(qū)交流討論,大家共同進(jìn)步!
新聞熱點(diǎn)
疑難解答
圖片精選