禁止微信内的H5页面上下拖动
客户需求:禁止微信内的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页面上下拖动的更多相关文章
- 小程序中webview内嵌h5页面
小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...
- ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号
异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...
- APP中内嵌H5页面为什么不能下载?
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
- 微信小程序内联h5页面,实现分享
在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx: ...
- H5禁止微信内置浏览器调整字体大小
微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是这也会导致字体大小改变以后,出现页面布局错乱的情况. 1.iOS的解决方案是覆盖掉微信的样式: body { /* IOS ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法
前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...
- 【前端开发】禁止微信内置浏览器调整字体大小的方法js
微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功 ...
- 微信公众号h5页面alert去掉域名
h5页面内嵌到微信公众号提示信息alert的时候会显示域名,去掉域名显示重写alert方法: window.alert = function(name){ var iframe = document. ...
随机推荐
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- Scrapy爬取Ajax(异步加载)网页实例——简书付费连载
这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...
- ACM入门之OJ~
所谓OJ,顾名思义Online Judge,一个用户提交的程序在Online Judge系统下执行时将受到比较严格的限制,包括运行时间限制,内存使用限制和安全限制等.用户程序执行的结果将被Online ...
- July 08th. 2018, Week 28th. Sunday
Make each day your masterpiece. 让生命中的每一天都成为杰作. From John Wooden. Try to focus on what we are doing r ...
- Jmeter接口测试-断言
JMeter接口测试-断言 对应qq群号:616961231 一个http请求发出,怎么判断执行的是否正确呢? 通过检查服务器响应数据,是否符合预期的数据, 如果是,任务成功, 如果否, 任务失败 ...
- pyspider 文档介绍
一 代码区结构 def on_start(self)是脚本的入口点.单击run仪表板上的按钮时将调用它. self.crawl(url, callback=self.index_page)*是这里最重 ...
- Java Excel导入导出(实战)
一.批量导入(将excel文件转成list) 1. 前台代码逻辑 1)首先在html页面加入下面的代码(可以忽略界面的样式) <label for="uploadFile" ...
- DuelJS 介绍
DuelJS 是什么? DuelJS是一个快速和小型的JavaScript库,可以帮助实现浏览器tab页主从关系的切换.使用它可以优化你浏览器和服务器之间的通信,以及你浏览器内部tab页之间的通信. ...
- 构造方法、This关键字、静态与封装的特性与作用
1.构造方法 构造方法是一种特殊的方法,专门用于构造/实例化对象. 构造方法根据是否有参数分为无参构造方法和有参构造方法. 1.1无参构造方法 无参构造方法就是构造方法没有任何参数.无参构造方法在创建 ...
- Swagger如何访问Ocelot中带权限验证的API
先亮源代码:https://github.com/axzxs2001/Asp.NetCoreExperiment/tree/master/Asp.NetCoreExperiment/SwaggerDe ...