Змінити розмір iframe відповідно до вмісту (лише для того самого домену) - CSS-хитрощі

Anonim

Зазвичай ви встановлюєте і ширину, і висоту для фреймів. Якщо вміст усередині більший, смуг прокрутки має бути достатньо. Наведений нижче сценарій намагається це виправити, динамічно змінюючи розмір 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, незважаючи на те, що, здавалося б, не призводить до помилок.