Как я могу получить событие iframe перед загрузкой?

На моем сайте я использую iframeA в iframeB, и, когда iframeA меняет его содержимое, я должен установить src. Я могу установить его только с событием onload, но это вызвано, когда сайт загружен. Я ищу какое-то событие или триггер, который помогает мне обнаружить изменение местоположения /src до его загрузки. Я не хочу ждать загрузки всей страницы до установки src. У меня нет прямого доступа к iframeA (только script ниже)

Некоторые коды:

var myframe = document.getElementById('frameB').contentWindow.document.getElementById('frameA');
myframe.onload=function (funcname) {...};

Ответ 1

Что изменит источник iframe? Если у вас есть доступ к этому коду, вы можете делать все, что есть в вашей функции onload.

Если ссылка имеет атрибут target, установленный в iframe, и именно так изменяется исходный код, вы можете приветствовать ссылку:

$('a[target="frameB"]').bind('click', function () {
    //run your onload code here, it will run as the iframe is downloading the new content
});

Кроме того, только боковое примечание, вы можете связать обработчик событий для события load в jQuery следующим образом:

$('#frameB').bind('load', function () {
    //run onload code here
});

UPDATE

SITE → frameB → frameA

$("#frameB").contents().find("#frameA").bind('load', function () {
    //load code here
});

Это выбирает элемент #frameB (находящийся в текущем верхнем уровне DOM), получает его содержимое, находит элемент #frameA, а затем связывает обработчик событий для события load.

Обратите внимание, что этот код должен запускаться после того, как #frameB загружен элементом #frameA, уже присутствующим в нем DOM. Что-то вроде этого может быть хорошей идеей:

$('#frameB').bind('load', function () {
    $(this).contents().find('#frameA').bind('load', function () {
        //run load code here
    });
});

UPDATE

К приветствующим ссылкам в элементе #frameB:

$('#frameB').contents().find('a[target="frameA"]').bind('click', function () {
    /*run your code here*/
});

Это найдет любую ссылку в элементе #frameB, у которой есть атрибут target, установленный на frameA, и добавьте обработчик события click.

И снова это будет работать, только если элемент iframe #frameB загрузился (или по крайней мере получил событие document.ready), чтобы вы могли выбрать его.

Ответ 2

Вы также можете попытаться найти подход к обнаружению, когда ваш iframe собирается покинуть свое текущее местоположение. Это может быть полезно в некоторых ситуациях. Чтобы сделать это, поместите следующий код в источник iFarme.

$(window).on('beforeunload', function() {

alert ('before load...');

});

Ответ 3

Отметьте gist или мой ответ на этот вопрос. Код там делает именно это:

function iframeURLChange(iframe, callback) {
    var unloadHandler = function () {
        // Timeout needed because the URL changes immediately after
        // the `unload` event is dispatched.
        setTimeout(function () {
            callback(iframe.contentWindow.location.href);
        }, 0);
    };

    function attachUnload() {
        // Remove the unloadHandler in case it was already attached.
        // Otherwise, the change will be dispatched twice.
        iframe.contentWindow.removeEventListener("unload", unloadHandler);
        iframe.contentWindow.addEventListener("unload", unloadHandler);
    }

    iframe.addEventListener("load", attachUnload);
    attachUnload();
}

Он использует событие unload. Всякий раз, когда страница выгружается, ожидается, что новая начнет загрузку. Если вы слушаете это событие, вы получите текущий URL, а не новый. Добавляя тайм-аут с задержкой в ​​0 миллисекунд, а затем проверяя URL-адрес, вы получаете новый URL-адрес iframe.

Тем не менее, этот unload прослушиватель удаляется каждый раз, когда загружается новая страница, поэтому он должен быть повторно добавлен снова на каждом load.

Функция позаботится обо всем этом. Чтобы использовать его, вам нужно только сделать:

iframeURLChange(document.getElementById("myframe"), function (url) {
    console.log("URL changed:", url);
});

Ответ 4

Я думаю, что добавление встроенного атрибута onload с соответствующим обработчиком событий в тег iframe решит вашу проблему.

function onIframeLoad(){
   //Write your code here
}

Изменение разметки

<iframe src='..' onload='onIframeLoad()' />