客户需求:禁止微信内的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. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  2. Scrapy爬取Ajax(异步加载)网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  3. ACM入门之OJ~

    所谓OJ,顾名思义Online Judge,一个用户提交的程序在Online Judge系统下执行时将受到比较严格的限制,包括运行时间限制,内存使用限制和安全限制等.用户程序执行的结果将被Online ...

  4. July 08th. 2018, Week 28th. Sunday

    Make each day your masterpiece. 让生命中的每一天都成为杰作. From John Wooden. Try to focus on what we are doing r ...

  5. Jmeter接口测试-断言

    JMeter接口测试-断言  对应qq群号:616961231 一个http请求发出,怎么判断执行的是否正确呢? 通过检查服务器响应数据,是否符合预期的数据, 如果是,任务成功,  如果否, 任务失败 ...

  6. pyspider 文档介绍

    一 代码区结构 def on_start(self)是脚本的入口点.单击run仪表板上的按钮时将调用它. self.crawl(url, callback=self.index_page)*是这里最重 ...

  7. Java Excel导入导出(实战)

    一.批量导入(将excel文件转成list) 1. 前台代码逻辑 1)首先在html页面加入下面的代码(可以忽略界面的样式) <label for="uploadFile" ...

  8. DuelJS 介绍

    DuelJS 是什么? DuelJS是一个快速和小型的JavaScript库,可以帮助实现浏览器tab页主从关系的切换.使用它可以优化你浏览器和服务器之间的通信,以及你浏览器内部tab页之间的通信. ...

  9. 构造方法、This关键字、静态与封装的特性与作用

    1.构造方法 构造方法是一种特殊的方法,专门用于构造/实例化对象. 构造方法根据是否有参数分为无参构造方法和有参构造方法. 1.1无参构造方法 无参构造方法就是构造方法没有任何参数.无参构造方法在创建 ...

  10. Swagger如何访问Ocelot中带权限验证的API

    先亮源代码:https://github.com/axzxs2001/Asp.NetCoreExperiment/tree/master/Asp.NetCoreExperiment/SwaggerDe ...