微信禁止下拉查看URL的处理方法


Posted in Javascript onSeptember 28, 2017

场景:

微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验;

效果原理:

微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现;

处理策略:

1、直接禁止mobile端的touchmove事件;

这种策略一般适用页面只有一屏不需要下拉情况下使用;

var touch1 = function(){
  document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) { 
    e.preventDefault(); 
  });
}

弊端:对于大小不同的屏要考虑到内容一屏全部显示,不然2+屏的内容就没有办法看了;

2、禁止touchmove同时判断scroll的位置是否到达顶部;

考虑到下拉时滚动条是否到达顶部 <= 10 来禁止touchmove事件,同时考虑存在先上拉再下拉的情况所以监听的touchend事件并计算一次touch事件流中的最高点位置用以判断

var touch2 = function () {
  var lastY;//最后一次y坐标点
  var betterY;//每次touch最高点
  document.querySelector(‘body‘).addEventListener('touchstart', function(event) {
    lastY = event.originalEvent.changedTouches[0].clientY;
    betterY = lastY;
  });
  document.querySelector(‘body‘).addEventListener('touchmove', function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    if(y > betterY){
      betterY = y;
    }
    var st = document.body.scrollTop; //滚动条高度
    if (y >= lastY && st <= 10) {
      lastY = y;
      event.preventDefault();
    }
    lastY = y;
  });
  document.querySelector(‘body‘).addEventListener('touchend', function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    var st = document.body.scrollTop; //滚动条高度
    if(y < betterY && st <= 10){
      event.preventDefault();
    }
  });
}

弊端:第一次的touchmove存在漏洞问题,touchmove的过程中也存在漏洞

3、监听scroll的滚动事件,禁止高度<0;

每当滚动条的高度小于0时就重置为0,强制回退顶部位置

var touch3 = function () {
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top <= 0){
      document.body.scrollTop = 0;
    }
  }
}

弊端:会存在下拉URL闪屏的现象

总结:

可以考虑以上三种策略结合来使用会更好;也有些人把touchmove禁掉后自己模拟touchmove处理,也是可以做到的就是比较复杂而已;

以上所述是小编给大家介绍的微信禁止下拉查看URL的处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复

Javascript 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
老生常谈的跨域处理
Jan 11 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 #Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 #Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 #Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 #Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 #Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 #Javascript
You might like
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Flask实现跨域请求的处理方法
2018/09/27 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
解析python的局部变量和全局变量
2019/08/15 Python
如何一键升级Python所有包
2020/11/05 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
实习推荐信
2014/05/10 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
民主生活会意见
2015/06/05 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python