客户需求:禁止微信内的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. ef和mysql使用(一)

    ef开发模式有3种:DateBase First(数据库优先).Model First(模型优先)和Code First(代码优先).这里我用的是code first 一个简单的例子: public ...

  2. oppo设备怎么样无需root激活XPOSED框架的教程

    在非常多部门的引流或业务操作中,基本上都需要使用安卓的强大XPOSED框架,近期,我们部门购来了一批新的oppo设备,基本上都都是基于7.0以上版本,基本上都不能够获得root的su超级权限,即使一部 ...

  3. SQL Server使用sp_rename重命名约束注意事项

    在SQL Server中,我们可以使用sp_name这个系统存储过程重命名数据库中对象的名称. 此对象可以是表. 索引. 列. 别名,约束等数据类型(具体可以参考官方文档).上周在使用这个函数重构数据 ...

  4. 【转载】c++中堆、栈内存分配

    一.内存划分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数参数值,局部变量值等.其操作方式类似于数据结构中栈.2.堆区(heap) — 一般由程序员分配释放, 若程序员不释放,程序结束时 ...

  5. 关于.Net mvc 项目在本地vs运行响应时间过长无法访问时,解决方法!

    最近可能是刚升级了电脑使用了window10操作系统,总是遇到了一些以前没有遇到过的事情! 今早来到公司本来准备写bug的,但是当我打开vs运行的时候发现今天的电脑响应的时间明显的要比之前打开网页调试 ...

  6. dropload.js(上拉加载插件使用过程中遇到的坑)

    dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...

  7. RIpng配置(GNS3)(第九组)

    一.拓扑图 二.路由器配置 路由器R1的配置(配置RIP静态路由协议,路由器对应接口配置相对应的ipv6地址,并给每个接口配置RIP 1 enable) 路由器R2的配置(配置RIP静态路由协议,路由 ...

  8. ASP.NET Core Web API 集成测试中使用 Bearer Token

    在 ASP.NET Core Web API 集成测试一文中, 我介绍了ASP.NET Core Web API的集成测试. 在那里我使用了测试专用的Startup类, 里面的配置和开发时有一些区别, ...

  9. android客户端向服务器发送请求中文乱码的问

    android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...

  10. 秋招已过,各大厂的面试题分享一波 附C++实现

    数据结构和算法是面试的一座大山,尤其去面试大厂更是必不可少!简单说明一下为啥喜欢考数据结构和算法,首先,算法有用也没用,如果是中小型企业的简单业务逻辑,可能用不到啥算法,但大厂一定会用到,都知道数据库 ...