小作者：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

載入網頁去除標題