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

StackOverflow https://stackoverflow.com/questions/604272

  •  03-07-2019
  •  | 
  •  

Вопрос

Я вижу, что этот вопрос задавался несколько раз, но ни одно из предложенных решений, похоже, не работает для сайта, который я создаю, поэтому я возобновляю ветку.Я пытаюсь изменить размер 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';
    }

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

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

Спасибо,

СиДжей

Это было полезно?

Решение

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

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

Обновление 2011 года:

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

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

Другие советы

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

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

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

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

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

С их страницы:

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top