Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jQuery Mobile + iframe

Автор: serg244 12.9.2011, 11:40

Здравствуйте.

Используется jQuery Mobile. Нужно отобразить страницу, которая содержит:
*) header
*) под ним на всю оставшуюся высоту находится iframe
т.е. код страницы имеет вид:

Код


<section data-role="page" id="iframePage" data-url="iframePage">
    <header data-role="header" >
        <h1>Header title</h1>
    </header>
    <div data-role="content" id="content" style="padding: 0;">
        <iframe src="http://google.ru/" width="100%" height="100%" frameborder="0" style="margin: 0; padding: 0;"></iframe>
    </div>
</section>

Цель: на странице показывается header и iframe и скроллинг должен работать только в iframe-е.

Сделано:
*) Для того, чтобы div#content занимал всю оставшуюся высоту, в обработчике события resize для window вычисляю высоту для этого div-а с учётом header и изменяю высоту div#content.
*) При высоте окна меньше 320 jQuery Mobile задавало min-height для html равным 320px. Я добавил в CSS класс, назначение которого для html задаёт для html min-height равным 1. При pageshow этот класс назначается для html, при pagehide - удаляется из html.
*) При высоте окна меньше 320 jQuery Mobile задаёт min-height для элемента страницы, равным 320. Я изменил функцию resetActivePageHeight() в коде jQuery Mobile, так, что на данной странице min-height не задаётся.

В результате скролл окна пропал, остался скролл в iframe. Десктопные браузеры показывают так, как нужно. Мобильные - скроллинг внутри iframe "не дотягивает" до самого низа контента внутри iframe.

Кто-то что-то ещё может посоветовать?