热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

webview滑动事件与内部html左右滑动事件冲突问题的解决办法

最近在做个混合app,用html做页面,然后通过webview嵌套在activity中,效果是这样:开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋,因为页面中有很多图片,每次页面显示出来后,图片还没加载完毕

最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样:

webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋, 因为页面中有很多图片, 每次页面显示出来后,图片还没加载完毕,所以加载图标一直在那里转动,影响了用户浏览页面,最后将此功能删除了)。

以上基本具备了混合app的雏形,可以拿出来忽悠一下客户了。

但是本着追求完美,不断创新的自虐精神,我又想在app上增加左右滑动可使页面前进和倒退的功能。其实在app上实现这些不难,在webview加载一个监听器,监听左右滑动事件,然后调用webview的 goback() 和 goForward就欧了,自己重载一个webview就可以实现,代码如下

public class cbWebView extends WebView {

    private GestureDetector gestureDetector;
    private Context cb;

    public cbWebView(Context context) {
        super(context);
        cb = context;
        gestureDetector = new GestureDetector(this.getContext(),
                onGestureListener);
    }

    public cbWebView(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);
        cb = context;
        gestureDetector = new GestureDetector(this.getContext(),
                onGestureListener);
    }

    public cbWebView(Context context, AttributeSet attrs) {

        super(context, attrs);
        cb = context;
        gestureDetector = new GestureDetector(this.getContext(),
                onGestureListener);
    }

    // 重载滑动事件
    @Override
    public boolean onTouchEvent(MotionEvent evt) {
        gestureDetector.onTouchEvent(evt);
        return super.onTouchEvent(evt);
    }

    private GestureDetector.OnGestureListener OnGestureListener= new GestureDetector.SimpleOnGestureListener() {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {

                float x = e2.getX() - e1.getX();
                float y = e2.getY() - e1.getY();

                if (x > 100) {
                    // 右滑 事件
                    Toast.makeText(cb, "右滑动2", Toast.LENGTH_LONG).show();
                    cbWebView.this.goBack();
                } else if (x <-100) {
                    // 左滑事件
                    Toast.makeText(cb, "左滑动2", Toast.LENGTH_LONG).show();
                    cbWebView.this.goForward();
                }
            
            return true;
        }
    };
}

 

之后坑爹的问题来了,因为页面中有个轮播图片,也是通过左右滑动切换图片,这就造成了,我滑动轮播图片的时候,也会触发webview的左右滑动事件,这可玩大了,本来只想滑动一下轮播图片,结果跳到了另外的一个页面...... 

我想造成这个问题的原因是,在html中的滑动事件,顺利的传送到了webview上。 我在网上查了很多资料,一直也没有好的解决办法,http://www.eoeandroid.com/thread-313541-1-1.html 这哥们碰到和我类似的问题,到目前也还没解决。但是这个问题肯定是可以解决的, 我下载了几个浏览器,UCWEB 、qq浏览器、360浏览器可以实现滑动切换页面,并且不与html中的touch事件冲突,android自带浏览器和遨游浏览器没有实现左右滑动切换功能。也许UCweb 这些浏览器没有使用webkit内核,也可能有什么其他高明的解决办法我们不知道。

但是不实现这个功能,总是不甘心,于是我又在baidu上一顿乱找,无意间看到这篇文章让我灵光一现 
http://blog.csdn.net/wangtingshuai/article/details/8635787  这篇文章讲的是 ”响应webview中的图片点击事件“,我好像找到了救命稻草,既然能够响应点击事件,那肯定也可以响应 ontouch事件,我只需要在轮播图片的touch事件中关闭webview的滑动响应就可以了(不要告诉我你不知道js与webview怎么通信, 网上教程有很多,自己看去)。

文章中的代码

// 注入js函数监听  
    private void addImageClickListner() {  
        // 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去  
        contentWebView.loadUrl("Javascript:(function(){" +  
        "var objs = document.getElementsByTagName(\"img\"); " +   
                "for(var i=0;i);  
    }  

 

经过改装后:

// 注入js函数监听
    private void addImageClickListner() {
        // 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
        mWebView.loadUrl("Javascript:(function(){"
                + "var objs = $('.swiper-container'); " //轮播图片的div容器,
                + "for(var i=0;i//点击任何地方 , 系统开始可以接受滚动
                + "for(var i=0;i);
    }

 

经过一番折,腾终于不负众望,达到了预期目标。 这里也有一个小瑕疵, "var objs = $('.swiper-container'); "  在js注入时指定了轮播的div ,缺少通用性。

目前只能做到这一步 ,这是我解决此类问题的一个另类思路,如果有更好的方法,还请高人告知,不甚感激!

 


推荐阅读
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • 本文总结了Java中日期格式化的常用方法,并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库,可以实现日期的格式化和显示。在页面中添加相应的标签库引用后,可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]
  • 本文介绍了使用postman进行接口测试的方法,以测试用户管理模块为例。首先需要下载并安装postman,然后创建基本的请求并填写用户名密码进行登录测试。接下来可以进行用户查询和新增的测试。在新增时,可以进行异常测试,包括用户名超长和输入特殊字符的情况。通过测试发现后台没有对参数长度和特殊字符进行检查和过滤。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Webmin远程命令执行漏洞复现及防护方法
    本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法,同时提供了防护方法。漏洞存在于Webmin的找回密码页面中,攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外,还指出了参考链接中的数据包不准确的问题,并解释了漏洞触发的条件。最后,给出了防护方法以避免受到该漏洞的攻击。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 从零学Java(10)之方法详解,喷打野你真的没我6!
    本文介绍了从零学Java系列中的第10篇文章,详解了Java中的方法。同时讨论了打野过程中喷打野的影响,以及金色打野刀对经济的增加和线上队友经济的影响。指出喷打野会导致线上经济的消减和影响队伍的团结。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
author-avatar
OkzYa-_916
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有