Изменить размер окна iframe в соответствии с содержимым (только в том же домене) - CSS-хитрости

Anonim

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

 $(function()( var iFrames = $('iframe'); function iResize() ( for (var i = 0, j = iFrames.length; i < j; i++) ( iFrames(i).style.height = iFrames(i).contentWindow.document.body.offsetHeight + 'px';) ) if ($.browser.safari || $.browser.opera) ( iFrames.load(function()( setTimeout(iResize, 0); )); for (var i = 0, j = iFrames.length; i < j; i++) ( var iSource = iFrames(i).src; iFrames(i).src = ''; iFrames(i).src = iSource; ) ) else ( iFrames.load(function() ( this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; )); ) ));

Изменим размер iframe следующим образом:

Посмотреть демо

По-прежнему проблематично…

  1. Источник содержимого iframe должен находиться в том же домене.
  2. если содержимое внутри iframe меняет высоту, это не адаптируется
  3. Я оставил код Google Analytics в демонстрации выше, так как, когда я добавил его, кажется, что он мешает и не изменяет размер iframe, несмотря на то, что, казалось бы, не генерирует никаких ошибок.