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

加载网页去除标题

关注下面的标签,发现更多相似文章
评论
说说你的看法