сделать высоту iframe динамической на основе содержимого внутри JQUERY / Javascript

Question

Я загружаю веб-страницу aspx в iframe. Содержимое в Iframe может быть больше высоты, чем высота iframe. В iframe не должно быть полос прокрутки.

У меня есть тег-обертка div внутри iframe, который по сути является всем содержимым. Я написал несколько jQuery для изменения размера:

$("#TB_window", window.parent.document).height($("body").height() + 50);

где TB_window - это div, в котором содержится Iframe.

body - тег body aspx в iframe.

Этот скрипт прикреплен к содержимому iframe. Я получаю элемент TB_window с родительской страницы. Хотя это работает нормально на Chrome, но TB_window рушится в Firefox. Я действительно запутался / растерялся из-за того, почему это происходит.

Answer 1

jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

Answer 2

Вместо того, чтобы использовать javscript / jquery, я нашел самый простой способ:

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>

Здесь 1vh = 1% высоты окна браузера. Таким образом, теоретическое значение высоты, которое должно быть установлено, составляет 100vh, но практически 98vh сотворило магию.

Answer 3

Немного улучшенный ответ на BlueFish ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

Это учитывает высоту экрана Windows (браузер, телефон), который хорош для адаптивного дизайна и фреймов с огромной высотой. Заполнение представляет собой заполнение, которое вы хотите выше и ниже фрейма в случае, если оно проходит через весь экран.

Answer 4

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

В этом случае размеры составляют 1680 x 720 пикселей, поэтому отступ снизу составляет 720/1680 = 0,43 * 100, что составляет 43%.

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

Answer 5

Это полезно, когда вам требуется решение без jquery. В этом случае вы должны попробовать добавить контейнер и задать для него отступ в процентах

HTML пример кода:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

Пример кода CSS:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}

Answer 6

$(document).height() // - $('body').offset().top

и / или

$(window).height()

См. Вопрос переполнения стека Как получить высоту элемента тела .

Попробуйте это, чтобы найти высоту тела в jQuery:

if $("body").height()

У него нет значения, если Firebug .Возможно, в этом проблема.

Answer 7

Чтобы добавить к окну, которое кажется обрезанным внизу, особенно если у вас нет прокрутки, я использовал:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }