Webview嘮嘮嗑

小做者：Ajiajiajia

1.將來的趨勢webview?

遇到實習回來的小姐姐，第一次據說了webview，當時不明覺厲，但如今仍然以爲很厲害噠。自認爲必定程度上大勢所趨，緣由以下：

• 優點
  • 迭代更新更加友好便捷。對於企業來講，使用webview，只須要寫一個頁面，不用費勁地去分別開發和維護Android端 、ios端，遇到一些模塊的需求大改動，只須要更新頁面，不須要從新下載app安裝包進行更新，用戶體驗更佳（像我就不喜歡看到「請前往運用商店更新後使用」）
  • 跨平臺的巨大優點
• 劣勢
  • 響應時間比原生的長
  • 若是沒有網絡鏈接的時候，用戶體驗較差
  • 存在手機系統版本問題,機型兼容問題,耗電問題,安全漏洞問題,資源釋放問題（後面會提出）

紙上談兵不如背水一戰，start👇

1.直接寫，而後被瀏覽器打開了...

咱們在點擊按鈕的時候加載網址（注意：網址必須以完整的http://或者ftp://等協議開頭，否則沒法加載出來）

運行上面部分的代碼，點擊按鈕後是使用了瀏覽器進行加載，而不是使用webview打開網址。

WHAT? what happended?怎麼不是在app內打開呢？（請看接下來走一遍流程的操做）

2.實如今webview中打開網址

【思考：一開始我是用的WebChromeClient，就一直沒法顯示，緣由是這裏需用setWebViewClient而不是WebChromeClient，爲何呢？】

WViewC～WChromeC你的夢想我來保駕護航

關於WebViewClient和WebChromeClient的聯繫與區別

也就是說，你的webview所load的網頁裏，包含了一段視頻，可是沒法顯示，一直在報錯。因此你須要使用setWebViewClient 和 重寫onReceivedHttpAuthRequest() 方法.......但 視頻仍是沒法播放，也許是由於受到JS的控制，或者它須要一個插件（plugin）。因此爲了能更好的獲得JS的支持，你須要setWebChromeClient()

• WebViewClient能夠處理onPageFinished，shouldOverrideUrlLoading等
• WebChromeClient讓您處理Javascript的alert（）和其餘功能

2.過一遍使用流程

1.manifest設置權限

<uses-permission android:name="android.permission.INTERNET"/>
複製代碼

2.loadUrl

定義webview組件（layout中有webview）,我是用的是BindView,generate自動生成的

稍後直接使用

頁面加載loadUrl的四種形式👇

1.直接加載一個網頁

2.加載apk包中的html頁面

通常來講Eclipse建立的工程默認是有個assets文件夾的，可是Android studio默認沒有幫咱們建立，那麼咱們就本身建立一個就好啦（步驟指導）

使用方法和效果以下：

3.加載手機本地SD卡的html頁面

使用上需添加相應的權限

4.加載html頁面的一小段內容

使用介紹：

• data：須要截取展現的內容
  • 內容裏不能出現 ’#’, ‘%’, ‘\’ , ‘?’ 這四個字符，若出現了需用 %23, %25, %27, %3f 對應來替代，不然會出現異常
• mimeType：展現內容的類型
• encoding：字節碼

mwebView.loadData(String data, String mimeType, String encoding)
複製代碼

實例：

mwebView.loadData(data, "text/html; charset=UTF-8", null);
複製代碼

2.setWebViewClient

做用：使得打開網頁時不調用系統瀏覽器， 而是在本WebView中顯示

• onPageStarted() -- 設置加載開始的操做
• onPageFinished() -- 設置加載結束的操做
• onLoadResource() -- 設定加載資源的操做
• onReceivedError(） -- 出現404問題的時候，爲了避免顯示醜醜的404界面，咱們就夾在一個本地的html
• onReceivedSslError() -- 處理https請求
• 等等等等

3.setWebChromeClient

輔助 WebView 處理 Javascript 的對話框,網站圖標,網站標題等等

• onProgressChanged() -- 得到網頁的加載進度並顯示
• onReceivedTitle() -- 獲取Web頁中的標題
• onJsAlert() -- 支持javascript的警告框
• onJsConfirm() -- 支持javascript的確認框
• onJsPrompt() -- 支持javascript輸入框

4.設置Back鍵控制網頁後退

點擊返回後，是網頁回退而不是推出瀏覽器

• Webview.canGoBack() -- 是否能夠後退
• Webview.goBack() -- 後退網頁
• Webview.canGoForward() -- 是否能夠前進
• Webview.goForward() -- 前進網頁
• Webview.goBackOrForward(intsteps) -- 以當前的index爲起始點前進或者後退到歷史記錄中指定的steps
  • steps爲負數則爲後退，正數則爲前進

5.銷燬Webview -- 防止內存泄漏

先讓 WebView 加載null內容，而後移除 WebView，再銷燬 WebView，最後置空。

• mwebview.clearHistory() -- 清除當前webview訪問的歷史記錄

3.升級版本：有選擇性的顯示網頁內容

此處一隱藏百度首頁的logo爲例，效果圖：

• 有logo的時候：

• 隱藏logo後

1.知識儲備

1.手機端訪問的百度，不是電腦顯示的百度

雖然在代碼中loadUrl("https://baidu.com/")，可是實際顯示在手機屏幕上的內容部分並非 baidu.com/ 的內容，而是 m.baidu.com/ 。 爲何前面會有一個 m ？並且二者顯示的內容差距那麼大呢？

由於只要是對Url進行加載，服務器會自動判別是來自於移動客戶端呢仍是網頁前端，而後進行相應的界面返回。

這就是我以前一直在https://baidu.com/裏面對字段進行顯示限制，卻毫無效果的緣由，我其實應該對 https://m.baidu.com/ 的對應組件進行控制

開始正題👇

2.經過瀏覽器查看元素，將不須要顯示的元素直接隱藏掉

在程序中調用js代碼，只須要將webview控件的支持js的屬性設置爲true，因爲每一個在網頁中顯示的元素在js中都有惟一與之對應的id存在。咱們經觀察發現，img 所在的div標籤中有惟一肯定的id，這就好辦了，咱們利用id進行display設置

好比咱們將百度的logo進行隱藏，其中對應圖片的惟一ID是「logo」（注意，需到手機打開帶有m的百度網址中進行id的查找）

3.如今web端網頁中進行嘗試

百度標誌的id是「logo」，咱們直接只用方法

logo.style.display='none'
複製代碼

就呈現以下所示的效果了

4.編寫js中的方法

這樣就大功告成了，加載後的網頁中百度的logo部分就被隱藏了，實現了以下的顯示效果

5.但存在問題-只有在網頁加載完後纔會執行咱們的js代碼

• 效果缺點：：網頁加載進行中能夠看到完整的網頁在加載（包括那些不須要顯示的元素），加載完成後才顯示出隱藏後的效果
• 解決方法：能夠在onPageStarted的時候顯示正在加載的動畫（小圈圈之類的），加載完後再顯示頁面

4.參考連接

https://blog.csdn.net/qq_32452623/article/details/52214460

https://blog.csdn.net/jiashuai94/article/details/76691289

https://blog.csdn.net/carson_ho/article/details/64904691

https://blog.csdn.net/benhuo931115/article/details/52180363

加載網頁去除標題