मैं कैसे पता लगा सकता हूं कि क्या कोई आईफ्रेम लोड है?

101

मैं यह जांचने की कोशिश कर रहा हूं कि क्या उपयोगकर्ता बटन क्लिक करने के बाद एक iframe लोड किया है या नहीं।

मेरे पास है

$('#MainPopupIframe').load(function(){
    console.log('load the iframe')
    //the console won't show anything even if the iframe is loaded.
})

एचटीएमएल

<button id='click'>click me</button>

//the iframe is created after the user clicks the button.
<iframe id='MainPopupIframe' src='http://...' />...</iframe>

कोई सुझाव?

वैसे, मेरा आइफ्रेम गतिशील रूप से बनाया गया है। यह प्रारंभिक पृष्ठ लोड के साथ लोड नहीं होता है।

— लाल होना
स्रोत

क्लिक करें

— विक्टर एस।

जवाबों:

185

आप इस (कोशिश jQuery) का उपयोग कर सकते हैं

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'https://heera.it');    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

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

jsfiddle DEMO ।

अपडेट: सादे का उपयोग करनाjavascript

window.onload=function(){
    var ifr=document.getElementById('MainPopupIframe');
    ifr.onload=function(){
        this.style.display='block';
        console.log('laod the iframe')
    };
    var btn=document.getElementById('click');    
    btn.onclick=function(){
        ifr.src='https://heera.it';    
    };
};

<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

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

jsfiddle DEMO ।

अद्यतन: इसके अलावा आप इस (गतिशील iframe) की कोशिश कर सकते हैं

$(function(){
    $('#click').on('click', function(){
        var ifr=$('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://heera.it',
            style:'display:none;width:320px;height:400px',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button><br />

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

jsfiddle DEMO ।

— अल्फा
स्रोत

वेनिला समाधान कमाल है।

— निक

load()पदावनत किया जाता है, लेकिन यह सिर्फ इसलिए है क्योंकि यह अजाक्स फ़ंक्शन के साथ विरोधाभासी था। अनुशंसित प्रतिस्थापन बस है on("load")। (दुर्भाग्य से, डॉक्स यह स्पष्ट नहीं करते हैं कि आपको बस इतना ही करना है।)

— टेपेमम

"लॉरड इफ्रेम" - द अल्फा | विरासत की रक्षा के लिए चल रहे छोटे अंडर कवर एडिटिंग गुरिल्ला युद्ध: पी

— मोहम्मद अब्दुल मुजीब

अच्छी पकड़ @MohdAbdulMujib, अब यह एक क्लासिक एक है :-)

— द अल्फा

मैंने पहले कभी एक जोड़ा तत्व बनाने के लिए उस विधि को नहीं देखा था। प्यार है, और पूरी तरह से मेरे लिए इसे हल किया है। अच्छा काम!

— indextwo

मैं इस तरह की कल्पना करता हूं:

<html>
<head>
<script>
var frame_loaded = 0;
function setFrameLoaded()
{
   frame_loaded = 1;
   alert("Iframe is loaded");
}
$('#click').click(function(){
   if(frame_loaded == 1)
    console.log('iframe loaded')
   } else {
    console.log('iframe not loaded')
   }
})
</script>
</head>
<button id='click'>click me</button>

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe>

— देसीस्लाव कामेनोव
स्रोत

आप ऑनलोड ईवेंट को भी आज़मा सकते हैं;

var createIframe = function (src) {
        var self = this;
        $('<iframe>', {
            src: src,
            id: 'iframeId',
            frameborder: 1,
            scrolling: 'no',
            onload: function () {
                self.isIframeLoaded = true;
                console.log('loaded!');
            }
        }).appendTo('#iframeContainer');

    };

— तोमन शिपही
स्रोत