Як перевірити, чи завантажено iframe чи він має вміст?

У мене є iframe з id = "myIframe", і тут мій код для завантаження його вмісту:

$('#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, чи він містить вміст. Використання iframe.contents().find()не буде працювати. Я не можу використовувати iframe.load(function(){}).

Спробуйте це.

<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();"> 

ласкаво використовуйте:

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

Оновив свою відповідь у міру зміни стандартів.

У мене була та ж проблема, і я додав до неї, що мені потрібно було перевірити, чи завантажується iframe незалежно від міждоменної політики. Я розробляв розширення chrome, яке вводить певний сценарій на веб-сторінку та відображає деякий вміст із батьківської сторінки у iframe. Я спробував наступний підхід, і це мені вдалося.
PS: У моєму випадку я контролюю вміст у iframe, але не на батьківському сайті. (Iframe розміщується на моєму власному сервері)

По-перше:
Створіть iframe з data-атрибутом у ньому, наприклад (ця частина в моєму випадку була введеним скриптом)
<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');
        }
    }           
}

Це може не точно відповісти на питання, але це справді можливий випадок цього питання, який я вирішив цим методом.

Найпростіший варіант:

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

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

Ви можете використовувати loadподію iframe, щоб відповісти, коли 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не буде працювати, якщо iframe srcвказує на інший домен, де працює ваш код.

Я не впевнений, чи можете ви виявити, чи завантажується він чи ні, але ви можете запустити подію, як тільки завантаження завершиться:

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

РЕДАГУВАТИ: Як зазначив Джессі Халлетт, це спрацьовуватиме завжди, коли iframeфайл завантажується, навіть якщо він уже є. Отже, по суті, якщо iframeвже завантажено, зворотний виклик буде виконано негайно.

у моєму випадку це був фрейм із перехресним походженням, який іноді не завантажувався. рішення, яке працювало для мене: якщо він успішно завантажений, то якщо ви спробуєте цей код:

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

це не дозволить вам отримати доступ contentDocumentі викинути помилку перехресного походження, однак якщо кадр не завантажено успішно, то contentDocumentповерне #documentоб'єкт

Коли iFrame завантажується, він спочатку містить #document, тому перевірка стану завантаження може найкраще спрацювати, перевіривши, що там зараз ..

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

Я отримав фокус, який працює наступним чином: [не тестували крос-браузер!]

Визначте обробник події завантаження iframe, визначений як

$('#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);

});

Застереження: це працює лише для тих самих документів з тим самим походженням.

Дійсно чудовим методом є використання jQuery AJAX. Батьківський кадр буде виглядати так:

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

Файл iframe_load.php завантажує бібліотеку jQuery та JavaScript, який намагається завантажити цільову URL-адресу в AJAX GET:

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' ) ;
            } });

ВАЖЛИВО Місце призначення повинно містити заголовок "Access-Control-Allow-Origin". Приклад в PHP:

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

Якщо вам потрібно знати, коли iframe готовий до маніпуляцій, використовуйте інтервал. У цьому випадку я "пінгую" вміст кожні 250 мс, і якщо в цільовому фреймі є якийсь вміст, зупиніть "пінг" і зробіть щось.

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
    }
}

Якщо ви розміщуєте сторінку та iframe в одному домені, ви можете прослухати Window.DOMContentLoadedподію iframe . Спочатку потрібно зачекати, поки оригінальна сторінка запуститься DOMContentLoaded, а потім приєднати DOMContentLoadedпрослуховувач подій до iframe Window.

З огляду на те, що у вас є такий iframe,

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

наступний фрагмент дозволить вам підключитися до DOMContentLoadedподії iframe :

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!');
    });
});