Android-браузер не будет обрабатывать события правильно, если присутствует iframe

Question

У меня возникла следующая проблема: у меня есть веб-просмотр, в котором я загружаю iframe, какой контентный документ я изменяю (вставляю текст) через javascript. Дело в том, что, когда содержимое становится слишком большим (веб-просмотр становится прокручиваемым), и когда пользователь прокручивает события касания, вы не будете обрабатываться правильно - то есть пользователь будет нажимать где-нибудь, и курсор появится в неуместном положении или не будет появляются вообще. Это поведение не наблюдается, если нет iframe.

Любые идеи относительно того, как решить эту проблему, приветствуются.

Answer 1

Проблема, скорее всего, из-за двойной прокруткой.

Поскольку iFrame имеет больше контента, чем может обрабатывать, события касания используются для прокрутки iFrame. Но сам веб-просмотр также может прокручиваться, так что существует много возможностей для странного поведения.

Рассмотрите, что произойдет, когда содержимое iFrame попадет на край (пользователь прокрутил весь путь вверх или вниз по iFrame). Что произойдет, если пользователь продолжит прокрутку iFrame? Должно ли это ничего не делать и есть событие? Откажитесь от содержимого прокрутки iFrame? Передайте событие в веб-представление, чтобы оно могло прокручиваться вместо этого?

Это неоднозначная ситуация. Способ реагирования Android может быть непротиворечивым на основе различных жестов касания и может даже варьироваться от одной версии Android к другой.

Вам лучше избегать iFrame и просто изменять содержимое веб-просмотра напрямую, или предоставить высоту 100% iFrame и ширину 100%, чтобы она занимала весь веб-просмотр.

Это позволит избежать конфликтов прокрутки, и Android перестает путаться о том, куда положить курсор.

Answer 2

1. Установите фиксированную высоту для вашего iframe. <iframe ... scrolling="no" height="150px">

2. Примените iScroll к содержащему div в вашем iframe.

iScroll доступна здесь: https://github.com/cubiq/iscroll

Вот демо iScroll в действии: http://cubiq.org/dropbox/iscroll4/examples/simple/