Динамическое изменение размера фрейма

Question

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

Я пробовал предлагаемые решения в каждой из следующих тем:

• Изменить размер iframe в соответствии с высотой содержимого в нем
• Изменение размера фрейма в зависимости от содержимого

Я полагаю, что приведенные выше решения не работают, потому что, когда делается ссылка на body.clientHeight, браузер фактически не определил высоту документа.

Вот код, который я использую:

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

Если я отлаживаю скрипт с помощью fire debug, высота клиента основного div iframe.contentDocument равна 0. Кроме того, body.offsetHieght и body.scrollHeight равны 0. Однако после завершения работы скрипта, если я проверю DOM элемента HTML iframe (с помощью отладки в огне) я вижу, что значение clientHeight в теле равно 456, а значение clientHeight внутреннего div равно 742. Это заставляет меня поверить, что эти значения еще не установлены при запуске iframe.onload. Итак, для одного из приведенных выше потоков я переместил код в обработчик событий body.onload исходной страницы iframe. Это решение также не сработало.

Любая помощь, которую вы можете оказать, очень ценится.

Спасибо

CJ

Answer 1

DynamicDrive имеет такой скрипт , который, я думаю, выполняет то, что вы просите.

Также есть более новая версия .

---

2011 обновление:

Я бы настоятельно рекомендовал бы использовать AJAX для чего-то подобного, особенно учитывая, что динамически изменяемый iframe работает только в одном домене.

Несмотря на это, это немного сомнительно, поэтому, если вам абсолютно необходимо использовать AJAX при стандартной загрузке страницы, вы действительно действительно должны использовать такие вещи, как history.pushState (и иметь стандартную загрузку страницы в качестве запасного браузеры, которые его не поддерживают). Есть плагин jQuery, который обрабатывает эти вещи для вас, написанный GitHubber, под названием pjax , который они используют only для навигации по репо.

Answer 2

Кстати, DynamicDrive улучшил свой скрипт, чтобы всегда изменять размер, даже если изменяется содержимое iframe: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Со своей страницы:

Это версия II оригинала Скрипт Iframe SSI, который нравится оригинальный скрипт позволяет без проблем отображать внешний контент на своей странице через IFRAME. Это делает это динамическое изменение размера IFRAME, чтобы быть высота страницы содержится внутри него, устраняя любые возможные Полосы прокрутки IFRAME появляются во время уютно показывая весь внешний содержание. Думайте об этом как SSI (сервер сторона включает) эмулируется с помощью DHTML! Этот скрипт работает как в IE5 +, так и в NS6 +, и для других браузеров, поддерживает возможность либо полностью скрыть iframe в вопросе или показать его используя высоту по умолчанию.

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

Answer 3

вы переместили обработчик? возможно, вам следует переместить функцию и во внутренний фрейм, чтобы при захвате значений высоты вы ссылались непосредственно на тело, а не на объект фрейма ... а затем вызывали функцию высоты parent.set

еще один трюк, вызов функции после тайм-аута 10 мсек

я помню, что однажды у меня была эта проблема, но я использовал IE getBoundingClientRect (), чтобы получить высоту содержимого, проверил что-то подобное в центре разработчиков Mozilla, это просто подсказка, я не исследовал ее

на другой ноте, что такое ifmBluePill? это iframe? или div внутри него? почему вы ссылаетесь на "contentDocument" div?