微信禁止下拉查看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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
[对联广告] JS脚本类
Aug 27 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
ThinkPHP中的三大自动简介
2014/08/22 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
深入研究React中setState源码
2017/11/17 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python pymongo模块用法示例
2018/03/31 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python实现手绘图效果实例分享
2020/07/22 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
同事吵架检讨书
2014/02/05 职场文书
平面设计师岗位职责
2014/09/18 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL