Преоразмерете Iframe, за да се побере съдържание (само за същия домейн) - CSS-трикове

Anonim

Обикновено вие задавате и ширина и височина за рамки. Ако съдържанието вътре е по-голямо, плъзгачите трябва да са достатъчни. Сценарият по-долу се опитва да поправи това чрез динамично преоразмеряване на рамката, за да се побере съдържанието, което се зарежда.

 $(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'; )); ) )); 

Ще преоразмери вградена рамка по следния начин:



Преглед на демонстрацията

Все още проблематично ...

  1. Източникът на съдържанието на iframe трябва да се намира в същия домейн
  2. ако съдържанието във вътрешната рамка промени височината, това няма да се адаптира
  3. Оставих кода на Google Analytics от демонстрацията по-горе, тъй като когато го добавих, той изглежда пречи и не преоразмерява рамката, въпреки че изглежда не генерира грешки.