अगर iframe लोड है या इसकी सामग्री है तो कैसे जांचें?

Question 1

मेरे पास आईडी = "myIframe" के साथ एक iframe है और यहां यह सामग्री लोड करने के लिए मेरा कोड है:

$('#myIframe').attr("src", "my_url");

समस्या कभी-कभी लोडिंग के लिए बहुत लंबी होती है और कभी-कभी यह बहुत जल्दी लोड हो जाती है। इसलिए मुझे "setTimeout" फ़ंक्शन का उपयोग करना चाहिए:

setTimeout(function(){
   if (//something shows iframe is loaded or has content)
   {
       //my code
   }
   else
   {
       $('#myIframe').attr("src",""); //stop loading content
   }
},5000);

सभी मैं जानना चाहता हूं कि यह कैसे पता लगाया जाए कि क्या आईफ्रेम लोड किया गया है या इसमें सामग्री है। का उपयोग करते हुए iframe.contents().find()काम नहीं करेगा। मैं उपयोग नहीं कर सकता iframe.load(function(){})।

Question 2

इसे इस्तेमाल करे।

<script>
function checkIframeLoaded() {
    // Get a handle to the iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (  iframeDoc.readyState  == 'complete' ) {
        //iframe.contentWindow.alert("Hello");
        iframe.contentWindow.onload = function(){
            alert("I am loaded");
        };
        // The loading is complete, call the function we want executed once the iframe is loaded
        afterLoading();
        return;
    } 

    // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("I am here");
}
</script>

<body onload="checkIframeLoaded();">

Question 3

कृपया उपयोग करें:

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

मानकों के बदलते ही मेरा जवाब अपडेट किया गया।

Question 4

मेरे पास एक ही मुद्दा था और इसमें जोड़ा गया, मुझे यह जांचने की आवश्यकता है कि क्या आइफ्रेम क्रॉस-डोमेन नीति के बावजूद लोड किया गया है। मैं एक क्रोम एक्सटेंशन विकसित कर रहा था, जो एक वेबपेज पर कुछ स्क्रिप्ट को इंजेक्ट करता है और आईफ्रेम में मूल पृष्ठ से कुछ सामग्री प्रदर्शित करता है। मैंने दृष्टिकोण का अनुसरण करने की कोशिश की और यह मेरे लिए एकदम सही था।
पुनश्च: मेरे मामले में, मेरे पास iframe में सामग्री पर नियंत्रण है, लेकिन मूल साइट पर नहीं है। (Iframe को मेरे स्वयं के सर्वर पर होस्ट किया गया है)

पहले:
इसमें एक data-विशेषता वाला एक iframe बनाएं जैसे (यह हिस्सा मेरे मामले में इंजेक्शन स्क्रिप्ट था)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

अब iframe कोड में, उपयोग करें:

var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);

अब मेरे केस के अनुसार इंजेक्टेड स्क्रिप्ट वापस:

setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
},3000);

तथा,

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $("#myiframe").prop('data-isloaded', '1');
        }
    }           
}

यह सवाल का सटीक जवाब नहीं दे सकता है लेकिन यह वास्तव में इस सवाल का एक संभावित मामला है जिसे मैंने इस पद्धति से हल किया है।

Question 5

सबसे आसान विकल्प:

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>

Question 6

loadIframe लोड होने पर प्रतिक्रिया देने के लिए आप iframe की घटना का उपयोग कर सकते हैं ।

document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

यह आपको नहीं बताएगा कि क्या सही सामग्री भरी हुई है: यह जाँचने के लिए, आप निरीक्षण कर सकते हैं contentDocument।

document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', body);
};

जांच की जा रही contentDocumentहै, तो आइफ्रेम काम नहीं करेगा src, जहां अपने कोड चल रहा है से भिन्न डोमेन के लिए अंक।

Question 7

मुझे यकीन नहीं है कि क्या आप यह पता लगा सकते हैं कि यह लोड है या नहीं, लेकिन लोडिंग के पूरा होने पर आप किसी ईवेंट को आग लगा सकते हैं:

$(function(){
    $('#myIframe').ready(function(){
        //your code (will be called once iframe is done loading)
    });
});

EDIT: जैसा कि जेसी हैलट ने बताया है, यह हमेशा iframeलोड होने पर भी फायर करेगा , भले ही यह पहले से ही हो। इसलिए अनिवार्य रूप से, यदि iframeपहले से लोड किया गया है, तो कॉलबैक तुरंत निष्पादित होगा।

Question 8

मेरे मामले में यह एक क्रॉस-ऑरिजनल फ्रेम था और कभी-कभी लोड नहीं हो रहा था। समाधान जो मेरे लिए काम करता है: यदि यह सफलतापूर्वक लोड हो जाता है तो यदि आप इस कोड को आज़माते हैं:

var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);

यह आपको contentDocumentक्रॉस-ऑरिजनल एरर को एक्सेस करने और फेंकने की अनुमति नहीं देगा, लेकिन यदि फ्रेम सफलतापूर्वक लोड नहीं होता है तो ऑब्जेक्ट contentDocumentवापस कर देगा#document

Question 9

जब एक iFrame लोड होता है, तो शुरू में इसमें #document शामिल होता है, इसलिए लोड स्थिति की जांच करने से यह पता चल सकता है कि अब क्या है।

if ($('iframe').contents().find('body').children().length > 0) {
    // is loaded
} else {
    // is not loaded
}

Question 10

मुझे निम्नानुसार काम करने की एक ट्रिक मिली: [क्रॉस-ब्राउज़र का परीक्षण नहीं किया है!]

परिभाषित iframe के onload घटना हैंडलर के रूप में परिभाषित किया गया है

$('#myIframe').on('load', function() {
    setTimeout(function() {
        try {
            console.log($('#myIframe')[0].contentWindow.document);
        } catch (e) {
            console.log(e);
            if (e.message.indexOf('Blocked a frame with origin') > -1 || e.message.indexOf('from accessing a cross-origin frame.') > -1) {
                alert('Same origin Iframe error found!!!');
                //Do fallback handling if you want here
            }
        }
    }, 1000);

});

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

अस्वीकरण: यह केवल SAME ORIGIN IFRAME दस्तावेजों के लिए काम करता है।

Question 11

वास्तव में एक शानदार तरीका jQuery AJAX का उपयोग है। मूल फ्रेम इस तरह दिखेगा:

<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

Iframe_load.php फ़ाइल jQuery लाइब्रेरी और एक जावास्क्रिप्ट पैकेज में गंतव्य URL को लोड करने का प्रयास करने वाले जावास्क्रिप्ट को लोड करेगी:

var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
            type: "GET",
            url: the_url_to_load,
            data: "",
            success: function(data){
                // if can load inside iframe, load the URL
                location.href = the_url_to_load ;
            },
            statusCode: {
                500: function() {
                    alert( 'site has errors' ) ;
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                // if x-frame-options, site is down or web server is down
                alert( 'URL did not load due to x-frame-options' ) ;
            } });

महत्वपूर्ण गंतव्य में "पहुँच-नियंत्रण-अनुमति-उत्पत्ति" शीर्षक होना चाहिए। PHP में उदाहरण:

HEADER( "Access-Control-Allow-Origin: *" ) ;

Question 12

यदि आपको यह जानने की जरूरत है कि आईफ्रेम कब हेरफेर करने के लिए तैयार है, तो एक अंतराल का उपयोग करें। इस स्थिति में, मैं हर 250 ms की सामग्री को "पिंग" करता हूं और यदि लक्ष्य iframe के अंदर कोई सामग्री है, तो "पिंग" को रोकें और कुछ करें।

var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 );

function checkIframeLoaded() {
    var iframe_content = $('iframe').contents();

    if (iframe_content.length > 0) {
        clearInterval(checkIframeLoadedInterval);

        //Apply styles to the button
        setTimeout(function () {
            //Do something inside the iframe 
            iframe_content.find("body .whatever").css("background-color", "red");
        }, 100); //100 ms of grace time
    }
}

Question 13

यदि आप पृष्ठ और iframe को एक ही डोमेन पर होस्ट कर रहे हैं, तो आप iframe की Window.DOMContentLoadedघटना सुन सकते हैं । आपको मूल पृष्ठ को DOMContentLoadedपहले फायर करने के लिए इंतजार करना होगा , फिर इफ्रेम पर एक DOMContentLoadedईवेंट श्रोता को संलग्न करना होगा Window।

आपको निम्नानुसार एक आइफ्रेम दिया गया है,

<iframe id="iframe-id" name="iframe-name" src="..."></iframe>

अगले स्निपेट आपको iframe की DOMContentLoadedघटना में हुक करने की अनुमति देगा :

document.addEventListener('DOMContentLoaded', function () {
    var iframeWindow = frames['iframe-name'];
    // var iframeWindow = document.querySelector('#iframe-id').contentWindow
    // var iframeWindow = document.getElementById('iframe-id').contentWindow

    iframeWindow.addEventListener('DOMContentLoaded', function () {
        console.log('iframe DOM is loaded!');
    });
});