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


Answers

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

<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.
Question

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

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

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

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

body - тег тела aspx в iframe.

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




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



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

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



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

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

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

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



Немного улучшенный ответ на 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";
}

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




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

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

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

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




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




Links