Обнаруживать, когда iframe начинает загружать новый URL-адрес

Как я могу обнаружить, что iframe на моей странице запускает, чтобы загрузить новую страницу?

Наша ситуация такова:

Когда содержимое iFrame начинает меняться, нам нужно отобразить анимацию "загрузки" и скрыть окно поиска.
Я знаю, как обрабатывать событие iframe has done to load (чтобы скрыть анимацию), но не как поймать начальное событие "начать изменять"...

Примечание: Я могу прикрепить jquery "click" к ссылкам в меню, которое будет работать. Однако внутри содержимого iframe существует много ссылок с перекрестными ссылками, и для них также применяется событие "изменения"! Поэтому нам нужно поймать событие, когда пользователь нажимает на ссылку внутри iframe или когда iframe src изменен с помощью javascript - потому что мы также хотим показать загрузку-анимацию и скрыть окно поиска.

Ответ 1

Я нашел лучшее решение, если iframe и страница контейнера имеют одинаковое происхождение, не нужно включать дополнительный код во внутреннюю страницу:

<iframe src="same-origin.com" onload="content_finished_loading(this)"></iframe>
<script>
    var indicator = document.querySelector('.loading-indicator');
    var content_start_loading = function() {
        indicator.style.display = 'block';
    };

    var content_finished_loading = function(iframe) {
        indicator.style.display = 'none';
        // inject the start loading handler when content finished loading
        iframe.contentWindow.onunload = content_start_loading;
    };
</script>

Ответ 2

Я придумал следующее решение - это возможно только потому, что мы контролируем содержимое содержимого iframe и окна хоста

Внутри iframe мы добавляем следующий нижний колонтитул script (все страницы используют один и тот же шаблон, поэтому это изменение для одного файла)

<script>
window.onunload = function() {
    // Notify top window of the unload event
    window.top.postMessage('iframe_change', '*');
};
</script>

Внутри хост-окна мы добавим этот script для контроля состояния iframe

function init_content_monitor() {
    var content = jQuery('.iframe');

    // The user did navigate away from the currently displayed iframe page. Show an animation
    var content_start_loading = function() {
        alert ('NOW: show the animation');
    }

    // the iframe is done loading a new page. Hide the animation again
    var content_finished_loading = function() {
        alert ('DONE: hide the animation');
    }

    // Listen to messages sent from the content iframe
    var receiveMessage = function receiveMessage(e){
        var url = window.location.href,
            url_parts = url.split("/"),
            allowed = url_parts[0] + "//" + url_parts[2];

        // Only react to messages from same domain as current document
        if (e.origin !== allowed) return;
        // Handle the message
        switch (e.data) {
            case 'iframe_change': content_start_loading(); break;
        }
    };
    window.addEventListener("message", receiveMessage, false);

    // This will be triggered when the iframe is completely loaded
    content.on('load', content_finished_loading);
}

Ответ 3

Когда вы создаете iframe динамически, включайте событие ONLOAD, например...

F=document.createElement('iframe');
F.onload=function(){
    UpdateDetails(
        this.contentWindow.document.title,
        this.contentWindow.location
    );
};
F.src='some url';
document.getElementById('Some_Container').appendChild(F);

Событие onload теперь будет постоянно обновлять глобальные переменные ниже с помощью функции ниже, так как пользователь просматривает сеть:

var The_Latest_Title='';
var The_Latest_URL='';
function UpdateDetails(Title,URL){
    The_Latest_Title=Title;
    The_Latest_URL=URL;
}