Κανονικά ορίζετε και πλάτος και ύψος για iframe. Εάν το περιεχόμενο στο εσωτερικό είναι μεγαλύτερο, οι γραμμές κύλισης πρέπει να αρκούν. Το παρακάτω σενάριο προσπαθεί να το διορθώσει με τη δυναμική αλλαγή μεγέθους του 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 όπως αυτό:
Προβολή επίδειξης
Ακόμα προβληματικό…
- Η πηγή του περιεχομένου iframe πρέπει να βρίσκεται στον ίδιο τομέα
- Αν το περιεχόμενο μέσα στο iframe αλλάξει ύψος, αυτό δεν θα προσαρμοστεί
- Άφησα τον κώδικα του Google Analytics από την παραπάνω επίδειξη, όπως όταν το πρόσθεσα σε αυτό φαίνεται να παρεμβαίνει και να μην αλλάζει το μέγεθος του iframe, παρόλο που φαίνεται ότι δεν δημιουργεί σφάλματα.