[轉載]微信中禁止網頁下拉出現"網頁由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提供"

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。