[转载]微信中禁止网页下拉出现"网页由XXX提供" 【亲测有效】

时间 2019-12-09

原文原文链接

最近在开发过程当中遇到新的需求：在微信公众号中禁止下拉出现我司域名，微信公众号中的域名是由微信内置浏览器根据网址自动读取，暂时不支持自定义功能。在没法更改的前提下，想到了禁止页面下拉的方法。因而有了如下代码：javascript

参考:微信中打开网页，下拉会显示网页由XXX提供，可是有些网页却没有，不一样平台不一样手机也不同，这是什么缘由？php

$(document).ready(function(){  
        function stopScrolling( touchEvent ) {   
            touchEvent.preventDefault();   
        }  
        document.addEventListener( 'touchstart' , stopScrolling , false );  
        document.addEventListener( 'touchmove' , stopScrolling , false );  
    });
复制代码

【注】此方法对于IOS 10.X.X版本以上不起做用css

这样确实能够解决禁止下拉问题，但会出现新的问题【页面a连接跟click 事件没法触发】，so,去掉了touchstart事件。html

具体缘由以下：html5

参考：移动端touch事件影响click事件以及在touchmove添加preventDefault致使页面没法滚动的解决方法java

当在移动端上点击屏幕时，会依次触发touchstart,touchmove,touchend,click事件。正确的触发过程应该是：浏览器

touchstart→touchmove→touchend或者touchstart→touchend→click。bash

若是在点击屏幕的时候手指滑动的话，是不会触发click事件的。微信

若是有须要用到touch事件作的特效必定要在touchstart或者touchmove中添加event.preventDefault()方法。

在touchstart中若是有event.preventDefault()方法，将不会触发click事件和a标签方法。在这里可使用tap代替click，可是a标签的话就不太方便了。

若是在touchmove中有event.preventDefault()方法，最好加上方向判断，固然若是你页面内容不须要滚动条就不须要加判断了。

然鹅，还会出现问题【列表页中仍是会出现下拉现象】，也就是说没起到做用。app

不能直接在html或者body上添加该方法
但有个bug：若是快速上滑再下滑，仍是会出现“网页由XXX提供”
对于IOS10.X.X版本以上的建议采用此方法

$(document).ready(function(){
    	var app=document.getElementById("app");
    	var touchstartY;
    	app.addEventListener("touchstart",function(event){
    		var events=event.touches[0]||event;
    		touchstartY=events.clientY;//获取触摸目标在视口中的y坐标
    	},false);
    	
    	app.addEventListener("touchmove",function(event){
    		var events=event.touches[0]||event;
    		//注意document.body.scrollTop始终为0
    		var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//获取滚动部分的高度
    		var clientHeight=document.documentElement.clientHeight;//获取手机屏幕高度（可视部分高度）
    		var scrollHeight=document.body.scrollHeight;//全部内容的高度
    		if(events.clientY>touchstartY&&scrollTop===0&&event.cancelable){
    			event.preventDefault();//禁止到顶下拉
    		}elseif(scrollTop+clientHeight>scrollHeight&&event.cancelable){
    			event.preventDefault();//禁止到底上拉
    		}
    	},false);
    })
复制代码

demo

<!DOCTYPE html>
<html>

  <head>
  	<meta charset="UTF-8">
  	<title></title>
  	<style type="text/css">
  		*{
  			padding: 0px;
  			margin: 0px;
  		}
  		ul {
  			width: 100%;
  			height: 5000px;
  			background: red;
  		}
  	</style>
  </head>

  <body>
  	<ul id="app">

  	</ul>
  	<script type="text/javascript">
  		(function(id){
  			var app = document.getElementById(id);
  			var touchstartY;
  			app.addEventListener("touchstart", function(event) {
  				var events = event.touches[0] || event;
  				touchstartY = events.clientY; //获取触摸目标在视口中的y坐标
  			}, false);

  			app.addEventListener("touchmove", function(event) {
  				var events = event.touches[0] || event;
  				//注意document.body.scrollTop始终为0
  				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
  				var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度（可视部分高度）
  				var scrollHeight = document.body.scrollHeight; //全部内容的高度
  				if(events.clientY > touchstartY && scrollTop === 0 && event.cancelable) {
  					event.preventDefault(); //禁止到顶下拉
  				}
  				else if(scrollTop + clientHeight > scrollHeight && event.cancelable) {
  					event.preventDefault(); //禁止到底上拉
  				}
  			}, false);
  		})('app');
  	</script>
  </body>

</html>
复制代码

[转载]微信中禁止网页下拉出现"网页由XXX提供" 【亲测有效】

demo

转自微信中禁止网页下拉出现"网页由XXX提供"