Zwykle ustawiasz szerokość i wysokość ramek iframe. Jeśli zawartość w środku jest większa, wystarczą paski przewijania. Poniższy skrypt próbuje to naprawić, dynamicznie zmieniając rozmiar elementu iframe, aby pasował do ładowanej treści.
$(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'; )); ) )); Zmieni rozmiar elementu iframe w następujący sposób:
Zobacz demo
Wciąż problem…
- Źródło treści iframe musi znajdować się w tej samej domenie
- jeśli zawartość wewnątrz elementu iframe zmieni wysokość, to się nie dostosuje
- Zostawiłem kod Google Analytics poza powyższym demo, ponieważ kiedy go dodałem, wydaje się, że przeszkadza i nie zmienia rozmiaru iframe, pomimo pozornego generowania żadnych błędów.