微信禁止下拉查看URL如何处理

微信下拉时可以查看到url，本身是微信的一种安全策略之一，也是一种用户交互友好的体验；本文主要介绍微信禁止下拉查看url的处理方法,需要的朋友可以参考下，希望能帮助到大家。

效果原理：

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

处理策略：

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

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

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

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

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

考虑到下拉时滚动条是否到达顶部

var touch2 = function () {
 var lastY;//最后一次y坐标点
 var betterY;//每次touch最高点
 document.querySelector(‘body‘).addEventListener( #39;touchstart #39;, function(event) {
 lastY = event.originalEvent.changedTouches[0].clientY;
 betterY = lastY;
 document.querySelector(‘body‘).addEventListener( #39;touchmove #39;, 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( #39;touchend #39;, 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的滚动事件，禁止高度

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

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

相关推荐：

node.js中http模块和url模块简介

详解修改Laravel中url()的根地址

php如何解析url中的中文字符

以上就是微信禁止下拉查看URL如何处理的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！