0

Приведенная ниже функция выполняется по атрибуту onload у iframe, для того чтобы растягивать iframe на высоту, соответствующую его содержимому и избавлять от полоски прокрутки.

Код функции:

function resizeIframe(iframe) { let elem = document.getElementById('myFrame'); let size=elem.contentWindow.document.body.scrollHeight; elem.style.height = size + "px"; }

Во время каждой загрузки страницы, содержащей iframe, высота iframe почему то устанавливается разная. Содержимое страницы, загружаемой в iframe, неизменно, как и ширина окна браузера. Почему всегда задается разный height у iframe и как это побороть?

2 ответа 2

1

Вероятно, ты не единственный, кто выполняет код в onload. Соответственно, если какие-то данные ещё не пришли и не отрисовались, ты получаешь одну высоту, а если отрисовались, то другую.

0

Попробуйте вместо elem.contentWindow.document.body.scrollHeight брать elem.contentWindow.document.body.offsetHeight

function resizeIframe(iframe) { 
  let elem = document.getElementById('myFrame'); 
  let size=elem.contentWindow.document.body.offsetHeight; 
  elem.style.height = size + "px"; 
}

4
  • Это не помогло. Commented 11 авг. 2021 в 8:59
  • Вероятнее всего, проблема не в этом участке. Покажите содержимое обеих разметок
    – Sergey K.
    Commented 11 авг. 2021 в 12:57
  • Заметил что к iframe добавляется класс class="lazyloaded". Сайт на WordPress и там используется плагин Hummingbird для ускорения загрузки. На сколько понимаю, класс lazyloaded добавляет этот плагин и каждый раз значение высоты в этом классе почему то отличается. Еще этот Hummingbird ломал кнопки отправки форм. Если в хроме в просмотре кода (ctrl+shift+i) удаляю class="lazyloaded" то высота фрейма становится той которая нужна. Вот теперь думаю, отказаться от Hummingbird или какой то JS скрипт использовать, который будет убирать class="lazyloaded" у iframe. Commented 11 авг. 2021 в 14:28
  • Лучше отказаться от плагина, чем костылировать скрипты по удалению классов или id'шников.
    – Sergey K.
    Commented 11 авг. 2021 в 16:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.