微信中禁止网页下拉出现网页由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版本以上的建议采用此方法
$(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始终为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();//禁止到顶下拉}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始终为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提供 【亲测有效】相关推荐
- 微信中禁止网页下拉出现网页由XXX提供
最近在开发过程中遇到新的需求:在微信公众号中禁止下拉出现我司域名,微信公众号中的域名是由微信内置浏览器根据网址自动读取,暂时不支持自定义功能.在无法更改的前提下,想到了禁止页面下拉的方法.于是有了以下 ...
- 微信浏览器禁止页面下拉查看网址
2019独角兽企业重金招聘Python工程师标准>>> function preventTouch() {event.preventDefault(); } document.add ...
- 网页下拉框智能诱导输入
<!-- /******************************************************************************************* ...
- JavaScript（js）网页--下拉菜单制作
JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网 鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
- JavaScript（js）网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网 鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
- 解决手机浏览器顶部下拉出现网页源或刷新的问题
解决手机浏览器顶部下拉出现网页源或刷新的问题 参考文章: (1)解决手机浏览器顶部下拉出现网页源或刷新的问题 (2)https://www.cnblogs.com/qhorse/p/7955011.h ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- 微信小程序界面下拉刷新实现方法
微信小程序中,通过下拉刷新页面是基本操作,在当前页面排满的情况下继续下拉加载更多内容.小程序和网页都可以实现这一功能,不同的是小程序界面有能实现下拉刷新功能的API,只需从系统调用即可. 通过查看微信 ...
- 下拉选择_在管理Excel中实现联动下拉选择
在系统中常常出现这样的情况:由于下拉选择的数量太多了,难以高效选择.为此管理Excel通过通过引入多级联动选择的方式来减少下拉选择的困难度.先看下使用效果: 联动下拉选择 这个功能,在管理Excel中 ...
最新文章
- limbo可以运行linux,这次真的了，安卓手机可以安装 Windows 10 了
- [PWA] Show Notifications when a Service Worker is Installed or Updated
- c语言中缺少link文件夹,c – Cmake找不到使用“link_directories”的库
- 纯数字加密和解密算法（原创）
- python 协程池gevent.pool_进程池\线程池,协程,gevent
- ShadowMap Sample
- Ubuntu Mono 初体验
- 推荐几个学霸级的技术公众号陪你过暑假
- win10 多开 vpn
- linux 下的绘图软件Visio
- 宋红康JVM 学习笔记
- idea设置主题风格
- python 水晶报表_VS2010中水晶报表应用及实例
- 如何在微信公众号正文中添加附件？
- [LOJ575]不等关系
- 为了面试能通过，我要看完这75道面试题（下）
- shell脚本实现批量解析域名IP地址（支持多DNS）
- 计算机专业cad 办公 ps,厦门集美办公、商务办公、CAD、PS、平面设计培训
- php 自动关键词,php实现自动获取生成关键词功能
- python珠穆朗玛峰问题_珠穆朗玛峰有多可怕？看沿途看完就明白了！