Браузер Wechat запрещает выпадающую страницу для просмотра URL

WeChat

В обычных условиях после того, как страница браузера WeChat будет закрыта, вы увидите сообщение «Эта веб-страница предоставлена ​​xxxx», поскольку страница будет предоставлена ​​третьей стороне, поэтому необходимо скрыть URL-адрес.

потому чтостраницы уже существуют, и имеет много страниц,Итак, мы хотим, чтобы решение было универсальным (не менее 90% страниц должны быть универсальными), а не модифицировать конкретный код для каждой страницы.

Время: 2019-09-11 16:43:48

Я вдруг подумал об этом и почувствовал, что мне нужна онлайн-ДЕМО, чтобы, когда я увижу эту проблему позже, я мог узнать, действительно ли решение в этой статье может решить эту проблему.

Интернет-адрес DEMO, нажмите на ссылку ниже. (Если его нельзя открыть, он может быть заблокирован браузером WeChat из-за использования страниц github для развертывания)

семя 245.GitHub.IO/demo/pages/…

Полный исходный код кейса:Нажмите здесь Github

ноль, добавить немного

Время: 2019-09-11 22:50:10
По методу @True не хочет разговаривать одноклассники, про-тест действенный, простой и грубый.

Этого можно добиться с помощью CSS

body:before {
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background: #fff;
}

Онлайн-кейс

Iphone7 IOS12 Браузер WeChat, тест pro эффективен, другие устройства не тестировались

1. Идеи

Чтобы решить эту проблему, прямой поиск в Google пришел к следующим выводам.

1.1, см. документацию для разработчиков WeChat.

Прежде всего, вам нужно проверить документацию разработчика WeChat и убедиться, что в JS SDK есть метод, который можно использовать для управления отображением и сокрытием этого URL-адреса.К сожалению, такого метода не предусмотрено.

1.2, запретить прокрутку touchmove

Поскольку «эта веб-страница предоставлена ​​xxxx» появляется только после того, как страница была перемещена вверх и продолжает опускаться, то отключение раскрывающейся страницы не решит проблему, это проще простого.

// 禁止页面滚动
document.body.addEventListener('touchmove', function(e) {
    e.preventDefault()
  }, false)

too young too simple , addEventListenerТретий параметр метода имеет проблемы с совместимостью.

function preventDefault(e) {
    e.preventDefault();
}

// Chrome 51、Firefox 49及以上
// 禁用触摸滚动页面
document.addEventListener('touchmove', preventDefault, {passive: false});
// 恢复触摸滚动页面
document.removeEventListener('touchmove', preventDefault, {passive: false});


// Chrome 51、 Firefox 49以下
document.addEventListener('touchmove', preventDefault, false);
document.removeEventListener('touchmove', preventDefault, false);

На данный момент хром 78 отсутствует, поэтому отключение прокрутки страниц происходит так.

// 禁止页面滚动
document.body.addEventListener('touchmove', function(e) {
    e.preventDefault()
  }, {passive: false})

В это время вы обнаружите, что страница не может быть вытянута, поэтому «эта страница предоставляется XXXX», не может быть замечена, идеальная.

1.3 Тело не прокручивается, нужно прокручивать только div-контейнер внутри

Однако исправлена ​​новая проблема.Страница не прокручивается.Если страница больше одного экрана, то можно просмотреть только ее половину.Кто это выдержит. Поэтому так же необходимо решить проблему прокрутки страницы после отключения touchmove.

Чтобы решить эту проблему, вы можете использовать следующий код.Указанный контейнер DIV можно прокручивать внутри.Здесь пусть узлы DOM, отображаемые компонентом реакции, поддерживают прокрутку в качестве примера.

let overscroll = function(el) {
  el.addEventListener('touchstart', function() {
    let top = el.scrollTop
    let totalScroll = el.scrollHeight
    let currentScroll = top + el.offsetHeight
    //If we're at the top or the bottom of the containers
    //scroll, push up or down one pixel.
    //
    //this prevents the scroll from "passing through" to
    //the body.
    if (top === 0) {
      el.scrollTop = 1
    } else if (currentScroll === totalScroll) {
      el.scrollTop = top - 1
    }
  })
  el.addEventListener('touchmove', function(evt) {
    //if the content is actually scrollable, i.e. the content is long enough
    //that scrolling can occur
    if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
  })
}
overscroll(document.querySelector('#app'))
document.body.addEventListener(
  'touchmove',
  function(evt) {
    console.log(evt._isScroller)
    //In this case, the default behavior is scrolling the body, which
    //would result in an overflow.  Since we don't want that, we preventDefault.
    if (!evt._isScroller) {
      evt.preventDefault()
    }
  },
  { passive: false }
)

Только вот этот js пока проблема, нужно задать высоту #app, и прокрутить, если она превышает длину.

Потому что эффект прокрутки в div-контейнере не очень, эластичной прокрутки нет, то есть если палец перестает скользить, страница перестает скользить. потому что увеличилось-webkit-overflow-scrolling: touch;Чтобы добавить эффект эластичной прокрутки.

Вот и под Iphone7 IOS12, и под OnePlus 7 (должна быть эта модель) проблем нет, и опыт нормальный. Но при поиске в Интернете использование этого свойства вызовет ошибку.

#app {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

1.4. Обратите внимание на ошибку -webkit-overflow-scrolling: touch

Для решения этих проблем можно обратиться к этой статье.В статье написано более подробно.Ставьте автору палец вверх."Углубленное изучение - webkit-overflow-scrolling: сенсорная прокрутка и прокрутка ios".

Производительность ошибки заключается в том, что она иногда застревает или не может скользить.

Iphone7, IOS12, не воспроизводится, я не знаю, проблема в конкретном мобильном телефоне и версии системы.

Решение: вwebkit-overflow-scrolling:touchатрибутдочерний элемент следующего уровнявверх, будетвысота плюс 1% или 1px. тем самымАктивировать полосу прокрутки.

main:after {
    min-height: calc(100% + 1px)
}

Конечно, периодические зависания — это только одна из проблем, кроме того, в этом свойстве есть много ошибок, включая, помимо прочего, следующие:

1. Свойство scrollTop не изменится при прокрутке

2. Жесты могут запускать прокрутку элемента через другие элементы

3. Приостановка других переходов при прокрутке

[Цитирую оригинальные слова автора статьи]

Так что пока, если не хотите так заморачиваться, идите прямо кiScrollилиbetter-scrollНу, я думаю, лучше-прокрутка все еще очень полезна. Если вам нравится быть ленивым, используйте-webkit-overflow-scrolling:touchТоже нет проблем.

В конце концов, мобильная вода слишком глубока, никогда не знаешь, случится ли следующая проблема с сафари или браузером ядра x5.

Во-вторых, резюмируя

При разработке веб-сайта для ПК самым сложным является обеспечение совместимости с IE, а при разработке мобильного веб-приложения самым сложным является совместимость с различными мобильными телефонами. Совместимость — это глубокая яма, которую фронтенд-разработка не может избежать.

Решение проблемы ведет к новым проблемам, бесконечным и бесконечным.

Без кода нет ошибок.

Содержание этой статьи примерно следующее.

  1. Чтобы устранить выпадающее меню «Эта страница предоставлена ​​xxxx»
  2. Используйте запрещенную схему touchmove
  3. Указывает, что некоторые элементы DIV не запрещают прокрутку touchmove, разрешая прокрутку страницы.
  4. Прокрутка внутри div увеличивает эластичную прокрутку
  5. Узнайте об ошибках, которые может вызвать эластичная прокрутка

Заключительные, справочные статьи

1,"Браузер WeChat запрещает разворачивание страницы для просмотра URL-адреса (не влияет на прокрутку внутри страницы)"

2,"Углубленное изучение - webkit-overflow-scrolling: сенсорная прокрутка и прокрутка ios"

3.«[Новые функции мобильного терминала] Пассивные прослушиватели событий»

4."пассивный прослушиватель событий"

5.«Отключение и восстановление сенсорной прокрутки страниц на мобильных терминалах»

Категории