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

加载网页去除标题