客户需求:禁止微信内的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. spring源码 — 四、MVC

    spring mvc是怎么实现的?为什么我们只需要在方法上写一个注解,就可以通过http访问这个接口?下面我们分3部分来解答这两个问题 注意:本文是基于spring4.3.2的 spring mvc整 ...

  2. C#字符串的一些常用方法

    字符串常用方法 string str =""; string[] strArray = str.Split('截取字符'); //按字符将字符串拆分为数组 str = str.Re ...

  3. 第一课《.net之--泛型》

    今天我来学习泛型,泛型是编程入门学习的基础类型,从.net诞生2.0开始就出现了泛型,今天我们开始学习泛型的语法和使用. 什么是泛型? 泛型(generic)是C#语言2.0和通用语言运行时(CLR) ...

  4. 常用的Java Keytool Keystore命令

    Java keytool是密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.它还允许用户储存他们的 ...

  5. 设计模式之外观模式——Java语言描述

    外观模式隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口.它想现有的系统添加了一个接口,以隐藏系统的复杂性 介绍 意图 为子系统中的一组接口提供了一个一致的界面,外观模式定义了一个高层接 ...

  6. Windows Server 2016-OU组织单位日常操作

    技术无所谓贵贱,既然曾经做过就总该是要留下点什么,毕竟做技术这些年给我们留下太多太多的成长经历,总有人问这些已经很皮毛了为什么还要写,其实没那么多花哨理由,就是想着做或者不做这一块总是要对过往做个简单 ...

  7. Fiddler-弱网测试设置

    第一步:打开模拟弱网环境 第二步:打开配置文件 第三步:修改配置参数  m_SimulateModem,修改后最好 Ctrl+S 保存一下 第四步:修改好参数返回后需要再次打开弱网环境 以上弱网设置就 ...

  8. Cocos Creator—如何给资源打MD5版本号

    Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写 ...

  9. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  10. 【RL-TCPnet网络教程】第41章 HTTP超文本传输协议基础知识

    第41章      HTTP超文本传输协议基础知识 本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习. ...