微信中禁止网页下拉出现网页由XXX提供 【亲测有效】
最近在開發(fā)過(guò)程中遇到新的需求：在微信公眾號(hào)中禁止下拉出現(xiàn)我司域名，微信公眾號(hào)中的域名是由微信內(nèi)置瀏覽器根據(jù)網(wǎng)址自動(dòng)讀取，暫時(shí)不支持自定義功能。在無(wú)法更改的前提下，想到了禁止頁(yè)面下拉的方法。于是有了以下代碼：
參考:微信中打開網(wǎng)頁(yè)，下拉會(huì)顯示網(wǎng)頁(yè)由XXX提供，但是有些網(wǎng)頁(yè)卻沒有，不同平臺(tái)不同手機(jī)也不一樣，這是什么原因？
$(document).ready(function(){ function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListener( 'touchmove' , stopScrolling , false ); }); 復(fù)制代碼【注】此方法對(duì)于IOS 10.X.X版本以上不起作用
這樣確實(shí)可以解決禁止下拉問(wèn)題，但會(huì)出現(xiàn)新的問(wèn)題【頁(yè)面a鏈接跟click 事件無(wú)法觸發(fā)】，so,去掉了touchstart事件。
具體原因如下：
參考：移動(dòng)端touch事件影響click事件以及在touchmove添加preventDefault導(dǎo)致頁(yè)面無(wú)法滾動(dòng)的解決方法
當(dāng)在移動(dòng)端上點(diǎn)擊屏幕時(shí)，會(huì)依次觸發(fā)touchstart,touchmove,touchend,click事件。正確的觸發(fā)過(guò)程應(yīng)該是：
touchstart→touchmove→touchend或者touchstart→touchend→click。
如果在點(diǎn)擊屏幕的時(shí)候手指滑動(dòng)的話，是不會(huì)觸發(fā)click事件的。
- 如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。
- 在touchstart中如果有event.preventDefault()方法， 將不會(huì)觸發(fā)click事件和a標(biāo)簽方法。在這里可以使用tap代替click，但是a標(biāo)簽的話就不太方便了。
- 如果在touchmove中有event.preventDefault()方法，最好加上方向判斷，當(dāng)然如果你頁(yè)面內(nèi)容不需要滾動(dòng)條就不需要加判斷了。
然鵝，還會(huì)出現(xiàn)問(wèn)題【列表頁(yè)中還是會(huì)出現(xiàn)下拉現(xiàn)象】，也就是說(shuō)沒起到作用。
- 不能直接在html或者body上添加該方法
- 但有個(gè)bug：如果快速上滑再下滑，還是會(huì)出現(xiàn)“網(wǎng)頁(yè)由XXX提供”
- 對(duì)于IOS10.X.X版本以上的建議采用此方法
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; //獲取觸摸目標(biāo)在視口中的y坐標(biāo)}, false);app.addEventListener("touchmove", function(event) {var events = event.touches[0] || event;//注意document.body.scrollTop始終為0var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //獲取滾動(dòng)部分的高度var clientHeight = document.documentElement.clientHeight; //獲取手機(jī)屏幕高度（可視部分高度）var scrollHeight = document.body.scrollHeight; //所有內(nèi)容的高度if(events.clientY > touchstartY && scrollTop === 0 && event.cancelable) {event.preventDefault(); //禁止到頂下拉}else if(scrollTop + clientHeight > scrollHeight && event.cancelable) {event.preventDefault(); //禁止到底上拉}}, false);})('app');</script></body></html> 復(fù)制代碼轉(zhuǎn)自微信中禁止網(wǎng)頁(yè)下拉出現(xiàn)"網(wǎng)頁(yè)由XXX提供"
轉(zhuǎn)載于:https://juejin.im/post/5d090827e51d454fbe24a68c
總結(jié)
以上是生活随笔為你收集整理的微信中禁止网页下拉出现网页由XXX提供 【亲测有效】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： selenium===使用docker搭
- 下一篇： 30336控制转移指令