Thông thường, bạn đặt chiều rộng và chiều cao cho iframe. Nếu nội dung bên trong lớn hơn, các thanh cuộn phải đủ. Tập lệnh bên dưới cố gắng khắc phục điều đó bằng cách tự động thay đổi kích thước iframe để phù hợp với nội dung mà nó tải.
$(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'; )); ) )); Sẽ thay đổi kích thước iframe như thế này:
Xem Demo
Vẫn có vấn đề…
- Nguồn của nội dung iframe phải nằm trên cùng một miền
- nếu nội dung bên trong iframe thay đổi chiều cao, điều này sẽ không thích ứng
- Tôi đã để mã Google Analytics khỏi bản trình diễn ở trên, vì khi tôi thêm nó vào, nó dường như cản trở và không thay đổi kích thước iframe, mặc dù dường như không tạo ra lỗi.