微信禁止下拉查看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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
JS中准确判断变量类型的方法
Jun 01 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
德生PL330的评价与改造
2021/03/02 无线电
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python通过正则表达式选取callback的方法
2015/07/18 Python
python先序遍历二叉树问题
2017/11/10 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python游戏地图最短路径求解
2019/01/16 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python turtle库的画笔控制说明
2020/06/28 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
春节请假条
2014/04/11 职场文书
出售房屋协议书范本
2014/10/06 职场文书
教师考核鉴定意见
2015/06/05 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL