客户需求:禁止微信内的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. 漫谈“采样”(sampling)

      越学越懵了,计算机中是怎么进行采样的,用了这么久的 rand() 函数,到现在才知道是怎么做的. 从均匀分布中采样   计算机中通过线性同余发生器(linear congruential gene ...

  2. 【java线程】的wait、sleep、join、yied

    1.概述 使用Thread相对来说比较简单,没有什么成本,但是通常来说,我们使用线程基本就是覆写run方法,然后调用线程对象的start函数启动线程. 对于面试人员来说,这些都不是面试官会问到的问题, ...

  3. [Inside HotSpot] C1编译器优化:全局值编号(GVN)

    1. 值编号 我们知道C1内部使用的是一种图结构的HIR,它由基本块构成一个图,然后每个基本块里面是SSA形式的指令,关于这点如可以参考[Inside HotSpot] C1编译器工作流程及中间表示. ...

  4. Java中三目运算符不为人知的坑

    一.思考题 以下代码可能有什么错误?为什么? import java.util.HashMap; import java.util.Map; public class Test { public st ...

  5. 16 , CSS 边框与边界

    1.CSS 中边框的使用 2.CSS 中边界的使用 16.1 CSS 中边框的使用 属性名称 属性值 说明 border-color 十六进制 可依序设置上,右,下,左线颜色 英文名称 border- ...

  6. GeoServer中sld文件的获取来源

    众所周知,uDig是GeoServer的一个客户端,可以方便地可视化配置样式. QGIS行不行呢? 当然可以,双击图层名称,弹出图层属性对话框 在符号化(style)标签页选择样式导出即可. 参考博客 ...

  7. SqlServer_查看SQLServer版本信息

    方法一: 执行sql语句 SELECT @@VERSION 方法二: 连接SQL Server Management Studio利用Object Explorer显示的主要版本号信息,显示当前实例产 ...

  8. 多标签分类的结果评估---macro-average和micro-average介绍

    一,多分类的混淆矩阵 多分类混淆矩阵是二分类混淆矩阵的扩展 祭出代码,画线的那两行就是关键啦: 二,查看多分类的评估报告 祭出代码,使用了classicfication_report() 三,宏平均与 ...

  9. 使用清华开源镜像安装tensorflow

    安装tensorflow时,如果使用直接安装速度相对较慢,采取清华大学的镜像会提高速度.GPU版本安装方法:pip install tensorflow-gpu==1.8 -i https://pyp ...

  10. vue2.0 日历日程表 ,可进行二次开发.

    由于工作业务需求,要写一个日程表,日程表写之前 要先生成日历,废话不多说,直接 上代码: <!DOCTYPE html> <html lang="zh-CN"&g ...