В WeChat запрещено раскрывать веб-страницу, чтобы появилось сообщение «Веб-страница предоставлена ​​XXX».

WeChat

В последнее время в процессе разработки мы столкнулись с новыми требованиями: в официальном аккаунте WeChat запрещено опускать наше доменное имя, доменное имя в официальном аккаунте WeChat автоматически считывается встроенным браузером WeChat по URL-адресу, и пользовательская функция временно не поддерживается. Исходя из того, что его нельзя изменить, я придумал способ запретить выпадающее меню страницы. Итак, есть следующий код:

Справка: откройте веб-страницу в WeChat, и в раскрывающемся списке будет показано, что веб-страница предоставлена ​​XXX, а некоторые веб-страницы - нет. Разные платформы и разные мобильные телефоны разные. В чем причина?

$(document).ready(function(){  
    function stopScrolling( touchEvent ) {   
        touchEvent.preventDefault();   
    }  
    document.addEventListener( 'touchstart' , stopScrolling , false );  
    document.addEventListener( 'touchmove' , stopScrolling , false );  
});

【Примечание】

  • Этот метод не работает для IOS 10.X.X и выше
  • Этот метод работает на одной странице, которую нельзя прокрутить. Если вам нужно прокрутить одну страницу, рекомендуется следующий метод.

Это действительно может решить проблему запрета выпадающего списка, но будет новая проблема [страница ссылка и событие клика не могут быть вызваны], поэтому событие touchstart удалено.

Конкретные причины следующие:

Ссылка: событие мобильного касания влияет на событие щелчка, а решение по добавлению preventDefault в touchmove приводит к тому, что страница не прокручивается.

Когда на мобильном терминале щелкают по экрану, последовательно запускаются события touchstart, touchmove, touchend и click. Правильная процедура триггера должна быть:

touchstart→touchmove→touchendилиtouchstart→touchend→щелчок.

Если палец скользит при касании экрана, событие щелчка не будет запущено.

  • Если вам нужно использовать специальные эффекты сенсорных событий, вы должны добавить метод event.preventDefault() в touchstart или touchmove.
  • Если в touchstart есть метод event.preventDefault(), событие щелчка и метод метки не будут запущены. Здесь можно использовать тап вместо клика, но тег a не очень удобен.
  • Если в touchmove есть метод event.preventDefault(), лучше всего добавить оценку направления.Конечно, если контенту вашей страницы не нужны полосы прокрутки, вам не нужно добавлять оценку.

Тем не менее, все еще будет проблема [феномен раскрывающегося списка все еще будет отображаться на странице списка], что означает, что он не работает.

  • не напрямуюhtmlилиbodyдобавить этот метод на
  • Но есть ошибка: если вы быстро проводите вверх и вниз, все равно будет отображаться «страница, предоставленная XXX» (используйте инерционную прокрутку, чтобы решить эту проблему, но она еще не решена, пожалуйста, не стесняйтесь звонить, если у вас есть решение)
  • Этот метод рекомендуется для версий выше 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);
})
Категории