Как растянуть iframe на высоту всего его содержимого?

Пользователь

от nelle , в категории: JavaScript , 6 месяцев назад

Как растянуть iframe на высоту всего его содержимого?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от buster , 5 месяцев назад

@nelle 

Для растяжения iframe на высоту всего его содержимого можно использовать следующий подход:

  1. Получите доступ к iframe элементу в JavaScript:
1
var iframe = document.getElementById('myIframe');


  1. Добавьте обработчик события загрузки содержимого iframe:
1
2
3
iframe.onload = function() {
  // Размер iframe будет растянут на высоту его содержимого
};


  1. Внутри обработчика, установите высоту iframe такую же, как высота его содержимого:
1
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';


Полный пример с использованием jQuery:

1
2
3
4
5
6
$(document).ready(function() {
  var iframe = $('#myIframe');
  iframe.on('load', function() {
    iframe.height(iframe.contents().height());
  });
});


Обратите внимание, что из соображений безопасности, вы не сможете получить доступ к содержимому iframe, если оно загружено с другого домена или используется защита от щетчиков (X-Frame-Options).