Автоматическая настройка высоты iframe в зависимости от содержимого без использования полосы прокрутки?

Question

Проблема: Как сделать так, чтобы iframe автоматически изменял свою высоту в зависимости от содержимого внутри, без использования прокрутки?

Привет, сообщество!

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

<iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe">...</iframe>

К сожалению, iframe в текущем состоянии не меняет свою высоту в зависимости от содержимого, и при этом используется полоса прокрутки, что не является желаемым поведением.

Я видел похожие вопросы на Stack Overflow, но, к сожалению, все они были закрыты. Есть ли у кого-нибудь идеи или решения для достижения желаемого результата? Заранее спасибо!

Answer 1

Ответ на ваш вопрос:

Совет hjpotter92 не работает в Safari! Я внес небольшое изменение в скрипт, чтобы он также работал в Safari.

Единственное изменение, которое было внесено — это сброс высоты на 0 при каждой загрузке, чтобы некоторые браузеры могли уменьшить высоту.

Добавьте этот код в тег <head>:

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

И добавьте следующий атрибут onload к вашему iframe, вот так:

<iframe onload='resizeIframe(this)'></iframe>

Теперь ваш iframe должен корректно изменять высоту и в Safari.

Answer 2

Чтобы избежать использования встроенного JavaScript, вы можете применить класс для вашего элемента <iframe>. Например:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

Затем используйте jQuery для работы с ним:

$('.iframe-full-height').on('load', function(){
    this.style.height = this.contentDocument.body.scrollHeight + 'px';
});

Таким образом, мы отделяем стили от JavaScript, что улучшает читаемость и поддержку кода.

Answer 3

Вот компактная версия кода:

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>

Этот код создает элемент <iframe>, который загружает страницу hello.html. Свойство sandbox="allow-same-origin" позволяет содержимому iframe обращаться к своему контенту, если оно загружено с того же источника.

Событие onload устанавливает высоту iframe, основываясь на высоте содержимого страницы внутри него. Используется this.contentWindow.document.body.scrollHeight для получения высоты содержимого, и добавляется 20 пикселей для отступа.

Если у вас есть дополнительные вопросы о работе с iframe или его стилями, не стесняйтесь задавать!

Answer 4

Ответ hjpotter92 вполне работает в определенных случаях, но я заметил, что содержимое iframe часто обрезается в Firefox и IE, хотя в Chrome все в порядке.

Вот что сработало для меня и решило проблему обрезки. Этот код я нашел на сайте http://www.dyn-web.com/tutorials/iframes/height/. Я немного изменил его, убрав атрибут onload из HTML. Поместите следующий код после HTML-кода <iframe> и перед закрывающим тегом </body>:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // сбросить до минимальной высоты ...
    // Для IE нужно немного добавить, иначе появляется полоса прокрутки
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Измените ID соответственно
    setIframeHeight(this.id);
}
</script>

HTML-код вашего iframe:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

Обратите внимание, если вы предпочитаете включить JavaScript в <head> документа, вы можете вернуть использование встроенного атрибута onload в HTML-коде iframe, как на странице dyn-web.

Answer 5

Метод .contents() в jQuery позволяет нам находить непосредственных потомков элемента в дереве DOM.

Пример использования jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

Обратите внимание, что высота тела (body) страницы внутри iframe должна быть установлена корректно.

CSS:

body {
  height: auto;
  overflow: auto;
}

Убедитесь, что высота содержимого iframe правильно рассчитывается, чтобы избежать непредвиденных проблем с отображением.

Автоматическая настройка высоты iframe в зависимости от содержимого без использования полосы прокрутки?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных