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