Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Автоматическое изменение высоты iframe

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


     13.04.2014    jQuery    4481

вопрос
Есть вот такой скрипт
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
10

494 | 164

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

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

Kane
12

97 | 32

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

html документ

Gopr
10

494 | 164

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
12

97 | 32

Kane - 13 апреля 2014 19:53 - Юзер

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

Gopr
10

494 | 164

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

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

Pioner
9

40 | 27

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


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

Kane
12

97 | 32

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
1126

1637 | 1204

Sander - 14 апреля 2014 19:46 - Эксперт

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

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

ICQ: 404-037-556
Skype: Sander8804

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

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