Подтвердить что ты не робот

Сделать 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.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете получить высоту содержимого 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();

Ответ 2

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

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

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

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

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

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

Редактировать: Если содержимое во фрейме постоянно меняется, позвоните:

parent.resizeIframe(this.frameElement);

из iframe после обновления. Работает для того же происхождения.

Или для автоматического определения:

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);

Ответ 3

Я обнаружил, что принятого ответа недостаточно, поскольку X-FRAME-OPTIONS: Allow-From не поддерживается в сафари или хром. Вместо этого вы отправились с другим подходом, найденным в презентации

И внутри iframe напишите функцию, чтобы опубликовать сообщение:

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

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

<body onLoad="resize();">

Ответ 4

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

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

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

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

Ответ 5

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

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

К сожалению, все они могут дать разные ответы, и они несовместимы между браузерами. Если вы установите для поля тела значение 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');
}

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

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

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

Ответ 10

Я нашел ответ от Трои не работает. Это тот же код, который был переработан для 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' );
    }
});

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

В этом случае измерения составляют 1680 x 720 px, поэтому наложение на дне составляет 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%;   
}

Ответ 14

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

Ответ 15

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);
});

Ответ 16

Вы также можете добавить повторяющийся 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)" ...

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

Ответ 17

Пример с использованием PHP htmlspecialchars() + проверка, если высота существует и> 0:

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';

Ответ 18

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

и/или

$(window).height()

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

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

if $("body").height()

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