客户需求:禁止微信内的H5页面上下拖动;

解决方案:

网上的答案几乎都是阻止默认事件,即:

 document.body.addEventListener('touchmove' , function(e){
e.preventDefault();
});

但是使用这个方法还存在一定的问题:

bug1:有时生效有时失效;

原因:经过不间断的实践测试,发现有可能是网络加载的问题,在用户拖动页面的时候上面的功能代码还没加载出来,所以没有生效。

解决方法:监听页面资源加载,等页面内所有资源加载完毕后再将页面显示出来。代码如下:

 document.onreadystatechange = function () {
if (document.readyState == "complete") {
document.body.style.display = "block";
} else {
document.body.style.display = "none";
};
};

bug2:华为P6、P9,魅族等手机上无效;

原因:有可能是安卓版本较低,存在兼容问题;(测试机有限,目前测的是安卓4.4上无效)

解决方法:暂未找到合适的解决方案,如有大神解决此类问题,欢迎留言指导~

谢谢~

禁止微信内的H5页面上下拖动的更多相关文章

  1. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  2. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  3. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  4. 微信小程序内联h5页面,实现分享

    在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx: ...

  5. H5禁止微信内置浏览器调整字体大小

    微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是这也会导致字体大小改变以后,出现页面布局错乱的情况. 1.iOS的解决方案是覆盖掉微信的样式: body { /* IOS ...

  6. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

  7. APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法

    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...

  8. 【前端开发】禁止微信内置浏览器调整字体大小的方法js

    微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功 ...

  9. 微信公众号h5页面alert去掉域名

    h5页面内嵌到微信公众号提示信息alert的时候会显示域名,去掉域名显示重写alert方法: window.alert = function(name){ var iframe = document. ...

随机推荐

  1. MongoDB 小记

    之前本人说过一款非关系型数据库的代表 Redis 的 < Redis 小记 >文章,觉得意犹未尽,今天就来介绍一款数据库 MongoDB ,先来看一下 MongoDB是一款基于分布式文件存 ...

  2. 『简单dp测试题解』

    这一次组织了一场\(dp\)的专项考试,出了好几道经典的简单\(dp\)套路题,特开一篇博客写一下题解. Tower(双向dp) Description 信大家都写过数字三角形问题,题目很简单求最大化 ...

  3. BeetleX和Asp.net Core之webapi基础性能对比

    本文主要针对BeetleX和Asp.net Core在基础WebApi功能性能对比 测试环境描述 硬件配置:E1230V2 16G内存 10Gb带宽 操作系统:Windows server 2008 ...

  4. Java8新特性之二:方法引用

    上一节介绍了Java8新特性中的Lambda表达式,本小节继续讲解Java8的新特性之二:方法引用.方法引用其实也离不开Lambda表达式. 1.方法引用的使用场景 我们用Lambda表达式来实现匿名 ...

  5. 《HelloGitHub》第 32 期

    公告 新加入了 2 位机器学期的小伙伴负责机器学习专栏.项目的首页增加合作组织一栏,如有开源组织有意合作可以点击联系我. 我们还在路上,不停地前行. <HelloGitHub>第 32 期 ...

  6. 请给你的短信验证码接口加上SSL双向验证

    序言 去年年底闲来几天,有位同事专门在网上找一些注册型的app和网站,研究其短信接口是否安全,半天下来找到30来家,一些短信接口由于分析难度原因,没有继续深入,但差不多挖掘到20来个,可以肆意被调用, ...

  7. geodocker-geomesa安装指南

        最近研究geopyspark原本以为大数据研究能告一段落,因为...     开玩笑的,还要一起建设社会主义呢!! 背景     geotrellis作为一个处理遥感数据的框架,对于遥感数据支 ...

  8. 如何购买并配置linux服务器上的数据库

    首先百度搜索阿里云 如果是学生可以学生认证 然后注册账号->个人认证->学生认证 然后你会发现 服务器一年只要114,114你买不了上当,买不了吃亏,买下面的ECS服务器,系统可以选择wi ...

  9. ubuntu下svn的命令使用

    Subversion的官方网站是:http://subversion.tigris.org/ SVN简介 SVN(Subversion)是一个自由.开源的项目源代码版本控制工具.目前,绝大多数开源软件 ...

  10. c语言总练习题

    !4,42 ?45 1 Description 键盘输入一个双精度数据,乘以2以后输出 Input 输入一个double型数据 Output 输出它的两倍数,结果保留8位小数 Sample Input ...