आम तौर पर आप सेट और चौड़ाई और ऊंचाई iframes के लिए। यदि अंदर की सामग्री बड़ी है, तो स्क्रॉलबार को पर्याप्त करना होगा। नीचे दी गई स्क्रिप्ट यह तय करने का प्रयास करती है कि गतिशील रूप से आईफ्रेम को उस सामग्री को फिट करने के लिए उसका आकार बदलकर।
$(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 के अंदर की सामग्री ऊंचाई बदलती है, तो यह अनुकूल नहीं होगा
- मैंने Google Analytics कोड को ऊपर के डेमो से छोड़ दिया, क्योंकि जब मैंने इसे इसमें जोड़ा तो लगता है कि इसमें कोई त्रुटि नहीं होने के बावजूद, इसमें हस्तक्षेप और iframe का आकार नहीं बदल रहा है।