проблема обрезки контента в iframe на iOS (iPad) - PullRequest
Новая
       2

проблема обрезки контента в iframe на iOS (iPad)

7 голосов
/ 22 марта 2012

Я ищу правильный способ убедиться, что динамически отображаемый контент виден после прокрутки в iframe на ipad / iOS5.

О, Iframes и iPad - какой ты прекрасный старый каштан. Я знаю, что:

  • iPad расширяет фреймы до полной высоты содержимого внутри него (почти так же, как при использовании свойства HTML5 " seamless ", но не совсем, поскольку он не наследует стили или события от родителя). Причудливый, раздражающий многих, но верный.
  • <iframe height="100%">, следовательно, бесполезен, поскольку его размер соответствует содержимому, а не контейнеру

  • Мне нужно обернуть свой iframe в div - а-ля 

    <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>

  • или еще добавьте хитрость для установки положения прокрутки кадра (который, я думаю, основан на уловках, упомянутых в этой статье )

Моя проблема заключается в том, что содержимое, которое динамически отображается внутри тела iframe (например, вкладки jquery, аккордеон и т. Д.), Может привести к тому, что браузер обрезает содержимое в экстентах страницы.

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

Я прочитал эту статью , в которой говорилось, что проблема устранена. Но это не кажется полностью исправленным; и все еще не решает проблему, заключающуюся в том, что из-за того, что вы должны обернуть свой iframe в div и поместить полосы прокрутки в этот div, браузеры рабочего стола могут отображать двойную полосу прокрутки в зависимости от того, как они интерпретируют overflow:auto.

p.s. Я использую шаблонную страницу HTML5 как внутри, так и вне iframe, с правильными настройками метапортпорта.

Ответы [ 3 ]

2 голосов
/ 30 мая 2012

Я предполагаю, что в iOS-сафари есть ошибка в том, как он обрабатывает фреймы с определенной шириной / высотой.Без определения ширины / высоты он пытается автоматически масштабировать их по размеру содержимого без необходимости прокрутки.

Лучший найденный мной обходной путь - вообще не прокручивать iframe, а прокручивать div оберткивнутри вставленной страницы.

Вот пример: 

<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>

a-file.html: 

<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
2 голосов
/ 18 мая 2012

Я обнаружил, что также смог решить проблему, сделав документ таким же высоким, как и содержимое iframe. (Как предлагалось Контент iframe не воспроизводится по прокрутке в iOs5 iPad / iPhone ) Но в моем случае я не хотел, чтобы пользователь мог прокручивать вниз в теперь высоком приложении, потому что оно должно быть полноэкранное приложение. Я использовал этот код для предотвращения вертикальной прокрутки: 

/*
Prevent Scrolling down.
 */
$(document).on("scroll",function(){
    checkForScroll();
});

var checkForScroll = function(e)
{
    var iScroll = $(document).scrollTop();
    if (iScroll > 1){
        // Disable event binding during animation
        $(document).off("scroll");

        // Animate page back to top
        $("body,html").animate({"scrollTop":"0"},500,function(){
            $(document).on("scroll",checkForScroll);
        });
    }
}

Я оценил множество вариантов и написал этот пост, включая тестовый код. http://dev.magnolia -cms.com / блог / 2012/05 / Стратегии-для-IFRAME-на-IPAD-проблемы /

Надеюсь, это поможет, Тофер

0 голосов
/ 07 декабря 2012

Это очень утомительная проблема, особенно если вы находитесь в сценарии, где вы должны использовать динамически масштабируемый iframe, в моем случае с API iframe YouTube. Вы не можете управлять свойствами прокрутки в iframe. Это даже не работает, если вы измените элементы iframe в окне отладки ios simulator / safari.

Лучшим решением, которое я нашел, было использование отрицательного позиционирования для удаления лишних пробелов. Android может иметь смешанные результаты, поэтому вы должны использовать обнаружение браузера и применять его таким образом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...