Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Автоматическое изменение высоты iframe

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


     13.04.2014    Все вопросы » jQuery    8841

вопрос
Есть вот такой скрипт
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 - 13 апреля 2014 18:18 -

Что находится в iframe? Видео?

Kane
Юзер

Kane - 13 апреля 2014 18:29 -

html документ

Gopr
Юзер

Gopr - 13 апреля 2014 18:41 -

Как вариант можно на 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 - 13 апреля 2014 19:53 -

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

Gopr
Юзер

Gopr - 13 апреля 2014 20:44 -

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

Pioner
Юзер

Pioner - 13 апреля 2014 20:17 -


    $(window).resize(function () {
    });

Kane
Юзер

Kane - 13 апреля 2014 21:23 -

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

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

Не работает

Sander
PHP-developer

Sander - 14 апреля 2014 19:46 -

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

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх