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

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

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

var myframe = document.getElementById('frameB').contentWindow.document.getElementById('frameA');
myframe.onload=function (funcname) {...};
Источник

4 ответа

Решение

Что изменит источник 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
});

ОБНОВИТЬ

САЙТ -> 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
    });
});

ОБНОВИТЬ

Для хай-джек ссылок в #frameB элемент:

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

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

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

Источник

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

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);
});
Источник

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

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

оповещение ("перед загрузкой...");

});

Источник

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

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

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

<iframe src='..' onload='onIframeLoad()' />
Источник
Другие вопросы по тегам