Мобильный: как предотвратить обновление по запросу

Как предотвратить обновление по запросу в веб-приложениях для Chrome Android?

Я пробовал ответы от

Отключение функции Android для обновления по запросу

body {
  overflow-y: hidden;
}

or

body {
  touch-action: none;
}

Это не работает. у кого-нибудь есть решение, которое работает? Для браузеров очень плохо делать поведение по умолчанию для обновления по запросу, это очень нежелательно для веб-приложений.


person Dave    schedule 13.10.2016    source источник
comment
Было бы очень хорошо, если бы для этого существовало надежное решение, которое вряд ли изменится со следующим обновлением Chrome и т. Д.   -  person user1063287    schedule 18.09.2017
comment
Довольно интересно. Возможно, я возьмусь за это.   -  person ellisbben    schedule 20.09.2017


Ответы (2)


Вот метод CSS для захвата необходимых сенсорных жестов, чтобы предотвратить обновление:

$("html").css({
    "touch-action": "pan-down"
});

Этот метод, кажется, хорошо работал для других пользователей. Надеюсь, это работает для ваших нужд.

Ссылка, а также здесь обсуждается больше стратегий: функция обновления

person Chris J    schedule 25.09.2017

Приведенный ниже код представляет собой решение только для javascript, полученное из нескольких источников, которые находятся внизу.

Если вы хотите изменить структуру своих страниц, вам может подойти только вариант CSS/HTML.

Кроме того, проект свойства CSS scroll-boundary-behavior находится в процессе стандартизации и добавлен в Chrome, предоставляя эту возможность среди нескольких других. Поскольку реализация очень и очень новая, я предоставляю ссылки внизу своего ответа.

Пример

хотя структура iframe jsfiddle вообще не позволяет работать обновлению по запросу, я также протестировал тот же скрипт в плоском HTML-документе на Chrome Android 60.0.3112.116.

Полный jsfiddle

event.preventDefault() может предотвратить поведение браузера по умолчанию, такое как обновление по запросу. Нам нужно обычное поведение браузера большую часть времени, но не тогда, когда это приведет к обновлению по запросу. Поскольку обновление по запросу происходит, когда касания перемещаются вниз по экрану, а мы прокручиваем документ вверх, мы будем вызывать preventDefault только в этих условиях.

//We're going to make a closure that will handle events
//so as to prevent the pull-to-refresh behavior.
var pullToRefreshPreventer = (function() {
  //To determine the direction in which a touch is moving,
  //we hold on to a map from touch identifier to touches
  //from the previous event.
  var previousTouches = {};
  return function(event) {
    //First we get all touches in this event and set up
    //the value which will replace `previousTouches`
    //before this event handler exits.
    var touches = Array.prototype.slice.call(event.touches);
    nextTouches = {}
    touches.forEach(function(touch){
      nextTouches[touch.identifier] = touch;
    });

    //Pull-to-refresh behavior only happens if we are
    //scrolled to the top of the document, so we can
    //exit early if we are somewhere in the middle.
    if(document.scrollingElement.scrollTop > 0) {
      previousTouches = nextTouches;
      return;
    }

    //Now we know that we are scrolled to the top of
    //the document;
    //look through the current set of touches and see
    //if any of them have moved down the page.
    for(var ix = 0; ix < touches.length; ix++) {
      var touch = touches[ix],
          id = touch.identifier;
      //If this touch was captured in a previous event
      //and it has moved downwards, we call preventDefault
      //to prevent the pull-to-refresh behavior.
      if(id in previousTouches && previousTouches[id].screenY < touch.screenY) {
        event.preventDefault();
        console.log("event.preventDefault() called")
        break;
      }
    }
    //lastly, we update previousTouches
    previousTouches = nextTouches;
  };
}());

//Since touch events which may call `preventDefault` can be
//much more expensive to handle, Chrome disallows such calls
//by default.  We must add the options argument `{passive: false}`
//here to make it work.
document.body.addEventListener('touchmove', pullToRefreshPreventer, {passive: false});
document.body.addEventListener('touchend', pullToRefreshPreventer, {passive: false});

Использованная литература:

Ответ StackOverflow со ссылкой на страницу chromestatus.com

"Считать прослушиватели сенсорных событий на уровне документа пассивными", chromestatus

"Быстрая сенсорная прокрутка по умолчанию"

"События касания"

scroll-boundary-behavior ссылки:

chromestatus

ошибка Chrome

выпуск github, предлагающий стандарт

черновик модуля CSS, дата последней публикации 07 сентября 2017 г.

person ellisbben    schedule 21.09.2017
comment
Я еще не смог протестировать на планшете, но приму ответ, так как не хочу, чтобы вы упустили награду, если она истечет! Надеюсь, что это работает и будет проверено и подтверждено как можно скорее! Спасибо. - person user1063287; 25.09.2017
comment
ЛМК как дела! - person ellisbben; 25.09.2017
comment
Результаты. Удаленная отладка на ПК. При использовании мыши для имитации смахивания вниз отображается оранжевое информационное сообщение в инструментах разработчика Chrome Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 1) На экране отладки ПК я могу обновить страницу, проведя мышью вниз. 2) Я не могу обновить страницу с помощью пальца и свайпа вниз на планшете. 3) Однако я могу обновить страницу, если проведу пальцем вниз по раскрывающемуся меню автозаполнения пользовательского интерфейса jqueryu, когда оно находится вверху списка. Из-за 3 пока не получилось. - person user1063287; 09.10.2017
comment
PS Вот как я выполняю удаленную отладку с Android на ПК stackoverflow.com/q/45560325 - person user1063287; 09.10.2017
comment
Хром версия? - person ellisbben; 09.10.2017
comment
Кроме того, jsfiddle, к сожалению, не демонстрирует поведение обновления с кодом JS или без него. - person user1063287; 10.10.2017
comment
Да, я отметил это выше - хотя структура iframe jsfiddle вообще предотвращает работу по запросу для обновления - jsfiddle структурирует свои страницы так, что всегда есть оболочка DOM, которая предотвращает обновление по запросу. Если вы пойдете и попытаетесь напрямую перейти по URL-адресу, который он использует для iframe результата, он также поместит его в оболочку. - person ellisbben; 10.10.2017
comment
Или, чтобы избежать любого шанса, что jsfiddle испортит вещи, добавив оболочку DOM, просто скопируйте этот материал в html-файл, которым вы напрямую управляете. - person ellisbben; 10.10.2017
comment
Извините за эту оплошность в отношении среды jsfiddle. Спасибо за подробную инструкцию по тестированию. Однако результаты остаются такими же, как описано выше (оранжевое информационное сообщение в консоли и автозаполнение jqueryui вызывает обновление страницы). - person user1063287; 11.10.2017