Ridimensiona iframe per adattarlo al contenuto (solo nello stesso dominio) - Trucchi CSS

Anonim

Normalmente imposti larghezza e altezza per iframe. Se il contenuto all'interno è più grande, le barre di scorrimento devono essere sufficienti. Lo script seguente tenta di risolverlo ridimensionando dinamicamente l'iframe per adattarlo al contenuto che carica.

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

Ridimensionerà un iframe in questo modo:



Visualizza demo

Ancora problematico ...

  1. L'origine del contenuto dell'iframe deve risiedere nello stesso dominio
  2. se il contenuto all'interno dell'iframe cambia altezza, questo non si adatterà
  3. Ho lasciato il codice di Google Analytics fuori dalla demo sopra, poiché quando l'ho aggiunto sembra interferire e non ridimensionare l'iframe, nonostante apparentemente non generi errori.