iframe-resizer не может нормально работать на мобильном устройстве

Question

Я использую следующую библиотеку http://davidjbradshaw.github.io/iframe-resizer/ которая позволяет изменять размер межфреймовых фреймов после исходной страницы.

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

При первой загрузке страницы высота iFrame является правильной (вся загруженная страница видна в iframe). Но при нажатии на ссылку, высота которой меньше предыдущей страницы, функция "resizedCallback" не может быть вызвана. Таким образом, текущая высота страницы остается такой же, как и на предыдущей странице. Хотя высота текущей страницы слишком мала по сравнению с предыдущей страницей. Это возникает только на мобильном телефоне.

Answer 1

Это можно решить, вызвав родительский метод изменения размера со второй страницы.

Например, ваш iFrame выглядит так:

<iframe id="paymentForm" src="/payments/onlineDetailsForm" width="100%"
    height="400px" onload='resizeIframeWithoutScrolling(this);'></iframe>

И методы изменения размера:

<script type="text/javascript">

function resizeIframeWithoutScrolling() {
    document.getElementById("paymentForm").style.height = (parseInt(document
            .getElementById("paymentForm").contentWindow.document.body.scrollHeight) + 1)
            + "px";
}


function AdjustIframeHeight(i) { document.getElementById("paymentForm").style.height = parseInt(i) + "px"; }

Теперь на второй странице просто добавьте следующий скрипт:

<script type="text/javascript">
parent.resizeIframeWithoutScrolling(document.getElementById("secondPageId").scrollHeight);

Этот скрипт будет корректировать размер автоматически.