jquery लोड होने पर iframe सामग्री की ऊँचाई प्राप्त करता है

Question 1

मेरे पास एक सहायता पृष्ठ है, help.php कि मैं एक iframe के अंदर main.php में लोड कर रहा हूँ। iframe में लोड होने के बाद मैं इस पृष्ठ की ऊँचाई कैसे प्राप्त कर सकता हूँ?

मैं यह इसलिए पूछ रहा हूं क्योंकि मैं 100% या ऑटो को iframe की ऊंचाई नहीं दे सकता। इसलिए मुझे लगता है कि मुझे जावास्क्रिप्ट का उपयोग करने की आवश्यकता है .. मैं jQuery का उपयोग कर रहा हूं

सीएसएस:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

जे एस:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

Question 2

ठीक है मैं अंत में एक अच्छा समाधान मिला:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

क्योंकि सीएसएस रेंडर करने से पहले कुछ ब्राउज़रों (सफारी और ओपेरा) की रिपोर्ट ऑनलोड पूरी हो जाती है, आपको माइक्रो टाइमआउट और खाली आउट सेट करने और iframe के src को पुन: असाइन करने की आवश्यकता होती है।

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

Question 3

कम जटिल उत्तर का उपयोग .contents()iframe पर पाने के लिए करना है। दिलचस्प है, हालांकि, यह मेरे मूल उत्तर में कोड का उपयोग करने से मुझे एक अलग मूल्य देता है, शरीर पर पैडिंग के कारण, मुझे विश्वास है।

$('iframe').contents().height() + 'is the height'

इस तरह से मैंने इसे क्रॉस-डोमेन संचार के लिए किया है, इसलिए मुझे डर है कि यह अनावश्यक रूप से जटिल है। सबसे पहले, मैं jQuery को iFrame के दस्तावेज़ के अंदर रखूँगा; यह अधिक मेमोरी का उपभोग करेगा, लेकिन इसे लोड समय नहीं बढ़ाना चाहिए क्योंकि स्क्रिप्ट को केवल एक बार लोड करने की आवश्यकता होती है।

अपने iframe के शरीर की ऊँचाई को जितनी जल्दी हो सके मापने के लिए iFrame के jQuery का उपयोग करें (onDOMReady) और फिर URL हैश को उस ऊँचाई पर सेट करें। और मूल दस्तावेज में, onloadiFrame टैग के लिए एक घटना जोड़ें जो iframe के स्थान को देखेगा और उस मूल्य को हटा देगा जो आपको आवश्यक है। क्योंकि onDOMReady हमेशा दस्तावेज़ के लोड ईवेंट से पहले होगा, आप निश्चित रूप से निश्चित हो सकते हैं कि मूल्य एक दौड़ की स्थिति को जटिल किए बिना सही ढंग से संचारित हो जाएगा।

दूसरे शब्दों में:

... Help.php में:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

... और मूल दस्तावेज में:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Question 4

मुझे क्रोम, फ़ायरफ़ॉक्स और IE11 पर काम करने के लिए निम्नलिखित मिला:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

जब iframes सामग्री लोड हो रही है तो घटना में आग लग जाएगी और यह IFrames की ऊँचाई को उसकी सामग्री पर सेट कर देगा। यह केवल उसी डोमेन के पृष्ठों के लिए काम करेगा, जैसे कि IFrame।

Question 5

JQuery के बिना यह करने के लिए कोड आजकल तुच्छ है:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

घटना को अनसुना करने के लिए:

frame.removeEventListener('load', syncHeight)

Question 6

आपको ऐसा करने के लिए iframe के अंदर jquery की आवश्यकता नहीं है, लेकिन मैं इसका उपयोग करता हूं क्योंकि यह कोड इतना सरल है ...

इसे अपने iframe के अंदर दस्तावेज़ में रखें।

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

छोटी खिड़कियों पर स्क्रॉलबार को खत्म करने के लिए ऊपर पांच जोड़े गए, यह आकार में कभी भी सही नहीं है।

और यह आपके मूल दस्तावेज़ के अंदर है।

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

Question 7

यह सही उत्तर है जिसने मेरे लिए काम किया

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });

Question 8

साधारण एक-लाइनर एक डिफ़ॉल्ट न्यूनतम ऊंचाई से शुरू होता है और सामग्री के आकार तक बढ़ता है।

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

स्निपेट का विस्तार करें

Question 9

स्वीकृत उत्तर $('iframe').loadअब a.indexOf is not a functionत्रुटि उत्पन्न करेगा । इन्हें अपडेट किया जा सकता है:

$('iframe').on('load', function() {
  // ...
});

कुछ अन्य समान .loadjQuery 1.8 के बाद से हटा दिया गया: "नया प्रकार टाइप करें: a.indexOf एक फ़ंक्शन नहीं है" नई नींव परियोजना खोलने पर त्रुटि

Question 10

यह एक jQuery का मुफ्त समाधान है जो कि iframe के अंदर SPA के साथ काम कर सकता है

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

Question 11

यह मेरा ES6 फ्रेंडली नो-जॉकरी टेक है

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});