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

 更新时间:2017年09月28日 17:05:31   投稿:mrr  
这篇文章主要介绍了微信禁止下拉查看URL的处理方法,需要的朋友可以参考下

场景:

微信下拉时可以查看到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 作用域链解析

    JavaScript 作用域链解析

    一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错。我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫。谢谢心得吧
    2014-11-11
  • 原生JS实现飞机大战小游戏

    原生JS实现飞机大战小游戏

    这篇文章主要为大家详细介绍了原生JS实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 谈一谈javascript中继承的多种方式

    谈一谈javascript中继承的多种方式

    本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 手把手教你搭建ES6的开发运行环境

    手把手教你搭建ES6的开发运行环境

    如今ES6已经发布了有一段时间了,很多人学了ES6但是却没运行环境,下面这篇文章主要给大家介绍了关于搭建ES6运行环境的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • JavaScript代码调试方法实例小结

    JavaScript代码调试方法实例小结

    这篇文章主要介绍了JavaScript代码调试方法,结合实例形式总结分析了JavaScript错误信息的处理与代码调试相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • js数字计算 误差问题的快速解决方法

    js数字计算 误差问题的快速解决方法

    下面小编就为大家带来一篇js数字计算 误差问题的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Express框架Router Route Layer对象使用示例详解

    Express框架Router Route Layer对象使用示例详解

    这篇文章主要为大家介绍了Express框架Router Route Layer对象使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 一文详解如何在项目中和平时练习中应用es6语法

    一文详解如何在项目中和平时练习中应用es6语法

    ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,下面这篇文章主要给大家介绍了关于如何在项目中和平时练习中应用es6语法的相关资料,需要的朋友可以参考下
    2022-11-11
  • JavaScript异步操作的几种常见处理方法实例总结

    JavaScript异步操作的几种常见处理方法实例总结

    这篇文章主要介绍了JavaScript异步操作的几种常见处理方法,结合实例形式总结分析了JavaScript常见的异步操作处理方法相关实现技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • 一文详解JS 类型转换方法以及如何避免隐式转换

    一文详解JS 类型转换方法以及如何避免隐式转换

    这篇文章主要为大家介绍了JS 类型转换方法以及如何避免隐式转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论