WebView和html5 的交互

最近项目中webview 和 html5做的交互比较多，由于不是很熟悉，难免会出现了一些bug。现在针对自己解决的这些bug,做个整理。方便日后学习和借鉴。

一. webview中的onReceivedTitle。

1.背景：我的项目是通过webview 加载url, 然后在url 中点击item项的时候，继续加载url。不同url 带有不同的标题，我们希望在点击item的时候，url标题能正确的显示在控件上（不会出现A url 把B url 的标题拿过来了，即出现标题错位现象）。结果发现，在谷歌手机Nexus上，依次点击进入的时候，标题没有错位。但是当点击返回的时候，总是拿的是上个html5标题。在华为手机上测试，结果正常。

2.分析：先上原来的效果图：

操作步骤：科室主页==》入院须知。
科室主页==》健康资讯==》资讯详情。
在代码中设置标题为：

mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);tv_topTitle.setText(title);}

进入的时候，标题是正常的，没有错位。但是点击返回按钮的时候，结果发现标题错位了，返回的时候总是会拿取上一个html5的标题。
刚开始还以为是缓存的原因，加了一行代码：

mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

还是不起作用，调试的时候发现谷歌和华为的差异如下：（分别在onReceivedTitle和goBack处打印webview中的标题）

华为手机打印日志：

谷歌手机打印日志:

对比发现：华为手机在返回的时候，会再次调用onReceivedTitle方法。而谷歌手机，返回之后，不会调用了。导致页面标题还是停在上一个html5的页面。

3.解决方案:
自定义个一个WebInfo类，将url和title作为成员变量：

  class WebInfo implements Serializable {private String url;private String title;public WebInfo(String url, String title) {this.url = url;this.title = title;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}}

onReceivedTitle中处理方案为：

 mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);Log.e("html5",view.getTitle());tv_topTitle.setText(title);//把标题信息存入webList,在页面返回时使用if (!webList.isEmpty()) {//比较最后一项的url是否与当前页面一样，不一样则添加，一样则不添加if (!webList.get(webList.size() - 1).url.equals(mWebView.getUrl())) {WebInfo info = new WebInfo(mWebView.getUrl(), title);webList.add(info);}} else {WebInfo info = new WebInfo(mWebView.getUrl(), title);webList.add(info);}}

在返回的时候，处理如下：

  @Overridepublic void onBack(View v) {if (mWebView.canGoBack()&& webList.size() > 1) {mWebView.goBack();webList.remove(webList.size() - 1);tv_topTitle.setText(webList.get(webList.size() - 1).getTitle());Log.e("html5返回",mWebView.getTitle());}else{finish();}}

经验证，此方案可以解决html5 返回标题错乱的问题，并且在华为手机和谷歌手机上都正常了。

二. webview 和js交互

这里写出的是我最常用的一个交互，比如说：如下，需要取出emptyTip的值。根据这个值是否为空，做相应的UI操作：

<body style="overflow-y:hidden;position:absolute;left:0em;right:0em;top:0em;bottom:0em;margin:0em"><p class="emptyTip">立即创建公告吧</p><div id="wrapper" style="position:absolute;width:100%;height:100%;overflow:hidden"></div>
<script>
$(function(){});
</script>
</body>

先设置webview支持JavaScript：

mWebView.getSettings().setJavaScriptEnabled(true);

执行js代码：

 @Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);hideLoadingDialog();     wv_content_notice.loadUrl("javascript:window.ys_control.getNoticeID(document.getElementsByClassName('emptyTip')[0].innerHTML);");}

自定义js接口：

private void dealwithUrl(String originalUrl) {wv_content_notice.addJavascriptInterface(new JsInteration(), "ys_control");}public class JsInteration {@JavascriptInterfacepublic void getNoticeID(String  result) {//不管结果如何，都发送消息出去，在handler中统一处理Message message = new Message();message.obj = result;message.what = IResult.DEAL_TITLE;handler.sendMessage(message);}}

处理消息：获取到emptyTip的内容，根据内容自行处理。

 case IResult.DEAL_TITLE:String content = (String) msg.obj;if(null!=content){Log.e("测试",content);tv_right_fun_2.setVisibility(View.INVISIBLE);tv_right_fun_3.setText("新建");tv_right_fun_3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent3 = new Intent(CdAnnounceActivity.this, CdNewAnnounceActivity.class);intent3.putExtra("CDROOMID", cloudroomid);startActivity(intent3);}});}break;

以上2点就是在运用webview和html5交互的时候，积累的一点小小经验。我觉得最大的收获就是：当对整体都不熟悉的时候，不妨在方法中多打印下一些重要参数，比如url等，通过观察发现url 或许可以得到启发。

WebView和html5 的交互相关推荐

Android开发之Webview中原生与JS交互
文章目录概述使用场景交互方式 Java调用JS代码 JS调用Java代码总结概述由于手机硬件资源的快速提升,使得采用混合开发的可能性逐渐成为现实并且流行起来.Android开发中最为简单的 ...
html5的交互标签,html5里交互元素的使用方法
在H5里,交互元素就是和用户进行互动的元素,这一部分非常的重要,并且和之前的JS控制的效果不同,H5相比于HTML增加了很多的交互元素,比如隐藏显示注脚就是其中的一个交互效果. 交互元素的使用 bod ...
android webview调js方法,Android中WebView与H5的交互，Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
android js交互数组,Android WebView —— Java 与 JavaScript 交互总结
相比于 Native App 和 Web App,Hybrid App 凭借其迭代灵活.控制自如.多端同步的优势在应用市场上越发显得优胜,主要得力于,其将变更频繁的部分产品功能使用 H5 开发并在客户 ...
android webview video标签,Android WebView支持html5 video标签
看到这个标题很兴奋了吧,但是内容肯定会让你失望...这先告诉结果了,我没在2.3上搞出什么名堂来. 起因是项目需要在android 2.3.*的版本上调用有video标签的页面,调研是否支持.百度,g ...
微信小程序web-view与H5之间交互（含支付）
第一章了解web-view与H5的交互(含支付) 文章目录第一章了解web-view与H5的交互(含支付) 前言一.web-view是什么? 二.使用步骤三.业务场景 1.小程序带参数跳转链 ...
android Echart力图webview，包含双向交互内容
android Echart力图webview,包含双向交互内容 H5界面代码 <!DOCTYPE html> <html> <head><title> ...
WebView使用以及JS交互以及浏览器编写与高德导航
WebView使用以及JS交互以及浏览器编写与高德导航 WebView使用以及JS交互以及浏览器编写高德导航(步行,骑行,驾车,货车) WebView使用以及JS交互以及浏览器编写浏览器编写 &l ...
html5 android 拍照上传,android webview使用html5 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个标签,iOS直接就支持,但android中不支持,网上的帖子说是因为android屏蔽了文件上传功能还是怎 ...

WebView和html5 的交互

WebView和html5 的交互相关推荐

最新文章

热门文章