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

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

参考:微信中打开网页,下拉会显示网页由XXX提供,但是有些网页却没有,不同平台不同手机也不一样,这是什么原因?http://www.php.cn/html5-tutorial-113115.html

$(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导致页面无法滚动的解决方法https://www.cnblogs.com/lvmingyin/p/5372678.html

当在移动端上点击屏幕时,会依次触发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提供” (使用惯性滑动可解决,但暂未解决,有解决的欢迎随时call)
  • 对于IOS 10.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();//禁止到顶下拉
        }else if(scrollTop+clientHeight>scrollHeight&&event.cancelable){
            event.preventDefault();//禁止到底上拉
        }
    },false);
})

 

你可能感兴趣的:(微信,vue)