Pakeiskite „Iframe“ dydį, kad jis atitiktų turinį (tik to paties domeno) CSS-gudrybės

Anonim

Paprastai „iframe“ nustatote ir plotį bei aukštį. Jei viduje esantis turinys yra didesnis, turi pakakti slinkties juostų. Žemiau pateiktas scenarijus bando tai išspręsti dinamiškai pakeisdamas „iframe“ dydį, kad jis atitiktų jo įkeltą turinį.

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

Bus pakeistas tokio dydžio „iframe“ dydis:



Peržiūrėti demonstracinę versiją

Vis dar problemiška ...

  1. „Iframe“ turinio šaltinis turi būti tame pačiame domene
  2. jei „iframe“ viduje esantis turinys pakeis aukštį, jis nebus pritaikytas
  3. „Google Analytics“ kodą palikau ne aukščiau pateiktoje demonstracinėje versijoje, nes, kai jį pridėjau, atrodo, kad tai trukdo ir nekeičia „iframe“ dydžio, nepaisant to, kad, atrodo, nesukėlė klaidų.