it-roy-ru.com

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

Я загружаю 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. Я действительно смущен/потерян на том, почему это происходит.

169
karry

Вы можете получить высоту содержимого IFRAME, используя: contentWindow.document.body.scrollHeight

После загрузки IFRAME вы можете изменить высоту, выполнив следующие действия:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

Затем в теге IFRAME вы подключаете обработчик следующим образом:

<iframe id="idIframe" onload="iframeLoaded()" ...

Недавно у меня была ситуация, когда мне дополнительно нужно было вызвать iframeLoaded из самого IFRAME после того, как в нем произошла отправка формы. Это можно сделать, выполнив следующие действия в скриптах содержимого IFRAME:

parent.iframeLoaded();
190
Aristos

Немного улучшенный ответ Аристосу ...

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

Затем объявите в своем iframe следующее:

<iframe onload="resizeIframe(this)" ...

Есть два небольших улучшения:

  1. Вам не нужно получать элемент через document.getElementById - так как он у вас уже есть в обратном вызове onload.
  2. Нет необходимости устанавливать iframe.height = "", если вы собираетесь переназначить его в следующем операторе. Это на самом деле влечет за собой дополнительные затраты, поскольку вы имеете дело с элементом DOM.
93
BlueFish

Я обнаружил, что принятого ответа недостаточно, поскольку X-FRAME-OPTIONS: Allow-From не поддерживается в Safari или Chrome . Вместо этого пошли с другим подходом, который можно найти в презентации , которую дал Бен Винегар из Disqus. Идея состоит в том, чтобы добавить прослушиватель событий в родительское окно, а затем внутри iframe, использовать window.postMessage, чтобы отправить событие родителю, сказав ему сделать что-то (изменить размер iframe).

Поэтому в родительском документе добавьте прослушиватель событий:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

А внутри фрейма напишите функцию для отправки сообщения:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

Наконец, внутри iframe добавьте onLoad в тег body, чтобы запустить функцию изменения размера:

<body onLoad="resize();">
50
Marty Mulligan

Добавьте это в iframe, это работает для меня:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

И если вы используете jQuery, попробуйте этот код:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
9
Mohit Aneja

Существует четыре различных свойства, на которые вы можете посмотреть, чтобы получить высоту содержимого в iFrame.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

К сожалению, все они могут дать разные ответы, и они несовместимы между браузерами. Если вы установите поле body в 0, тогда document.body.offsetHeight даст лучший ответ. Чтобы получить правильное значение, попробуйте эту функцию; которая берется из библиотеки iframe-resizer, которая также обеспечивает сохранение правильного размера iFrame при изменении содержимого или изменении размера браузера.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}
5
David Bradshaw

На всякий случай это кому-нибудь поможет. Я вырывал свои волосы, пытаясь заставить это работать, затем я заметил, что у iframe была запись класса с высотой: 100%. Когда я убрал это, все работало как ожидалось. Поэтому, пожалуйста, проверьте наличие конфликтов CSS.

2
user8640976

Вы можете отослать связанный вопрос здесь - Как сделать ширину и высоту iframe такими же, как у родительского div?

Установить динамическую высоту -

  1. Нам нужно общаться с междоменными iFrames и родителем
  2. Затем мы можем отправить высоту прокрутки/высоту содержимого iframe в родительское окно.

И коды - https://Gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

1
Mohan Dere

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

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

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

1
PHP-Binod

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

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

Немного улучшенный ответ на 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 (браузер, телефон), который хорош для адаптивного дизайна, и фреймы, которые имеют огромную высоту .... Padding представляет требуемый отступ выше и ниже фрейма в случае, если он проходит через весь экран. , 

0
Tadej Vengust

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

В этом случае размеры составляют 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%;   
}
0
loek

Я нашел ответ от Трои, не работал. Это тот же код, переработанный для AJAX:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});
0
Martin Lester

вы также можете добавить повторяющийся requestAnimationFrame в свой resizeIframe (например, из ответа @ BlueFish), который всегда вызывается до того, как браузер раскрасит макет, и вы можете обновить высоту iframe, когда его содержимое изменило свою высоту. например формы ввода, ленивый загруженный контент и т. д.

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

ваш обратный вызов должен быть достаточно быстрым, чтобы не иметь большого влияния на общую производительность

0
user2520818
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);
});
0
Keyur Savsani

Это полезно, когда вам требуется решение без 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%;
}
0
Juan M

Другие ответы не работали для меня, поэтому я сделал некоторые изменения. Надеюсь, это поможет

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
0
Ravi