Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » jQuery » Автоматическое изменение высоты iframe

Автоматическое изменение высоты iframe

     Все вопросы » jQuery    8813

вопрос
Есть вот такой скрипт 
jQuery(function($) {
     $('iframe').load(function(){$(this).height($(this).contents().find('html').height());});
});

После загрузки страницы он вычисляет и задает высоту для iframe. Необходимо что бы он так же вычислял и задавал высоту каждый раз при изменении размера окна браузера. Я так понимаю необходимо использовать функцию .resize().
Php выучил а вот до js все никак руки не дойдут, кто не занят, прошу помочь со скриптом.

Ответил: Kane

Изменение высоты фрейма при изменении размеров окна браузера
$(window).resize(function () { 
                        var iframe = $('#iframe', parent.document.body);
                        iframe.height($(iframe).contents().find('body').height());
});


Если высота фрейма меняется динамически то вот, она будет обновляться каждую секунду
setInterval(function(){
                        var iframe = $('#iframe', parent.document.body);
                        //alert('document: ' + document.body.offsetHeight);
                        iframe.height($(iframe).contents().find('form').height());
                        },1000);

8 комментариев

Gopr
Юзер

Gopr - -

Что находится в iframe? Видео?
Kane
Юзер

Kane - -

html документ
Gopr
Юзер

Gopr - -

Как вариант можно на css попробовать без js
<div class="iframe-html"><iframe src="http://сайт.ру_папка_файл.html"></iframe></div>
.iframe-html {position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.iframe-html iframe {position:absolute;top:0;left:0;width:100%;height:100%}
Kane
Юзер

Kane - -

Спасибо за ответ, интересный способ. Однако работает немного не так, при уменьшении окна браузера уменьшается и высота блока iframe-html а должна на оборот увеличиваться. Видимо без js все же не обойтись.
Gopr
Юзер

Gopr - -

при уменьшении окна браузера уменьшается и высота блока iframe-html а должна на оборот увеличиваться
padding-bottom:56.25%;
заменить на 
padding-bottom:100%;
Возможно сработает, не уверен...
Pioner
Юзер

Pioner - - 


    $(window).resize(function () { 
    });
Kane
Юзер

Kane - -

Спасибо за ответы
Gopr padding-bottom:100%; не помогло

Pioner 
 $(window).resize(function () { 
        jQuery(function($) {
          $('iframe').load(function(){$(this).height($(this).contents().find('html').height());});
       });
  });

Не работает
Sander
PHP-developer

Sander - -

Kane, 
$('iframe').contents()
будет работать только в том случае, если страница фрейма не ведет на внешний источник.
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Похожие вопросы

 07.07.2012 ayy_jay  Шаблоны (TPL), Стили (CSS), jQuery
 24.12.2012 pznt  jQuery
 15.03.2013 www7sergey  jQuery
 24.08.2013 jarrro  Общие вопросы, jQuery
 03.11.2013 grallast  jQuery
 25.11.2013 FastFud  jQuery
 19.01.2014 ale-eex  Шаблоны (TPL), Стили (CSS), jQuery
 19.01.2014 ale-eex  Шаблоны (TPL), Стили (CSS), jQuery
 18.01.2015 Morse  jQuery
 01.03.2015 Johny  jQuery
  • Puxlik | Telegram Sender 13
    Фото Puxlik
    Puxlik
    Telegram Sender
    Версию 17.1 поддерживает ?
  • TeraMoune | Не загружается изображение [Ошибка HTTP] ... 2
    Фото TeraMoune
    TeraMoune
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
  • RedFox | Не загружается изображение [Ошибка HTTP] ... 2
    Фото RedFox
    RedFox
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    "Некоторые картинки загружаются, но большинство нет."

    Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
    post_max_size = 100M
    upload_max_filesize = 100M
    max_file_uploads = 20

    Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
  • LMakc | Модуль читалка pdf 1
    Фото LMakc
    LMakc
    Модуль читалка pdf
    Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
  • ssssss | Сделать подсчет количества символов в ко ... 5
    Фото ssssss
    ssssss
    Сделать подсчет количества символов в комментариях
    Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
  • alex.sg.spb | Как вывести информацию о обновлении ново ... 8
    Фото alex.sg.spb
    alex.sg.spb
    Как вывести информацию о обновлении новости, но на время?
    вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Спасибо огромное. Этот вариант самый простой и рабочий!
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    К черту htaccess давайте проще

    к href добавьте id="xfield_value"
    <a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

    И добавьте скрипт обработчик 
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Так сайт не работает вообще. Браузер выдает такое

    Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
    Попробуйте удалить файлы cookie.

    ERR_TOO_MANY_REDIRECTS

    Куки чистил не помогает
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Попробуйте так
    RewriteEngine On
    RewriteCond %{REQUEST_URI} %20
    RewriteRule (.*)%20(.*) $1+$2 [N]
    RewriteRule (.*) $1 [R=301,L]
наверх