禁止微信内的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. ...
随机推荐
- 使用Rotativa在ASP.NET Core MVC中创建PDF
在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP.NET MVC,那么Rotativa工具已经可用,我们可以使用 ...
- 基于ITextSharp插件在ASP.NET MVC中将图表导出为PDF
样本: 在这个示例中,我们使用的是微软给我们提供的数据库,也就是家喻户晓的Northwind数据库.要下载Microsoft的免费样本Northwind数据库,您需要访问以下URL.下载Northwi ...
- asp.net core系列 48 Identity 身份模型自定义
一.概述 ASP.NET Core Identity提供了一个框架,用于管理和存储在 ASP.NET Core 应用中的用户帐户. Identity添加到项目时单个用户帐户选择作为身份验证机制. 默认 ...
- javascript入门篇(四)
Break 和 Continue 语句 break 它常用于跳出 switch() 语句, break 语句也可用于跳出循环.break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话) co ...
- JAVA基础知识(一)—JAVA概述
JAVA概述 1991 年Sun公司的James Gosling(詹姆斯·高斯林)等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名 ...
- RadioButton监听事件
RadioButton为单选按钮,他需要与RadioGroup配合使用 对应的布局代码: <?xml version="1.0" encoding="utf-8&q ...
- 设置Mac 终端走代理
1.打开终端执行:export http_proxy=socks5://127.0.0.1:1080 这个只能在当前终端执行一次退出后就需要重新设置 如果需要开机自动设置,把上面的代码加到~/.bas ...
- 微信小程序 写一个获取验证码 及setInterval 使用基本方法
<!--index.wxml--> <view class="container"> <view class="container_cont ...
- 2. CMake 系列 - 编译多文件项目
目录 1. 编译不使用第三方库的项目 1.1 项目目录结构 1.2 相关代码 1.3 编译 2. 编译使用第三方库的项目 2.1 项目目录结构 2.2 相关代码 2.3 编译 1. 编译不使用第三方库 ...
- python的进程与线程(二)
线程 之前了解了操作系统的发展史,也知道了进程和线程的概念,归纳一下就是: 进程:本质上就是一段程序的运行过程(抽象的概念) 线程:最小的执行单元,是进程的实体 ...