微信禁止下拉查看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 相关文章推荐
表单提交验证类
Jul 14 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
原生js+canvas实现下雪效果
Aug 02 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php实现微信扫码支付
2017/03/26 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
学校学习雷锋活动总结
2014/07/03 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
护士业务学习心得体会
2016/01/25 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书