Проверка загрузки содержимого iframe?

Question

Мне нужно запустить функцию javascript при загрузке содержимого iframe. Я вижу много (устаревших?) Ответов об использовании события загрузки iframe, которое, похоже, не запускается вообще (в Chrome).

Не срабатывает вообще (по крайней мере in Chrome):

<iframe id="target-iframe" src="SRC_URL" onload="iframeLoaded()"></iframe>

Настройка прослушивателя для readyState iframe запускается до готовности контента:

function listenForIframe() {
    const iframe = document.getElementById("target-iframe");
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (iframeDoc.readyState == 'complete') {
        iframe.contentWindow.onload = function(){
            // console.log('loaded')
        };
        iframeLoaded();
        return;
    }
    window.setTimeout(listenForIframe, 100);
}

Мой текущий пример использования заключается в использовании iframe-resizer и получить следующее сообщение об ошибке, потому что содержимое iframe еще не существует. Просто пытаюсь сохранить чистую консоль здесь!

iframeResizer. js: 791 Не удалось выполнить 'postMessage' для 'DOMWindow': предоставленный целевой источник ('http://localhost:3000') не соответствует источнику окна получателя ('null').

Он в конечном итоге загружается, но хотел бы избавиться от этой ошибки, если это возможно.

Answer 1

Чтобы получать уведомления при загрузке iFrame, вы все равно можете использовать событие onload сегодня.

Создайте iFrame и установите идентификатор для JavaScript:

<iframe id="test" src="SRC_URL"></iframe>

Теперь получите доступ iFrame с JavaScript и установите EventListener для события загрузки:

const iframe = document.getElementById("test");
iframe.addEventListener("load", function() {
    console.log("Finish");
});

Когда iFrame завершит загрузку, в консоли регистрируется «Fini sh». Я проверил его с помощью Google Chrome, и он отлично работает.

В EventHandler вы можете выполнять действия. Например, отправьте сообщение:

iframe.contentWindow.postMessage({ title: "Hi", message: "Seems to work" }, targetOrigin);

Также убедитесь, что у вас есть разрешение на встраивание веб-страницы (параметры X-frame).