Как получить событие Iframe перед загрузкой? - PullRequest
Новая
       2

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

2 голосов
/ 18 января 2012

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

Код: 

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

Ответы [ 4 ]

1 голос
/ 06 декабря 2017

Отметьте это Суть или мой ответ на этот вопрос .Там код делает именно это: 

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);
});
1 голос
/ 18 января 2012

Что будет менять источник 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
    });
});

ОБНОВЛЕНИЕ

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

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

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

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

1 голос
/ 20 ноября 2013

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

$ (окно) .on ('beforeunload', function () {

alert ('before load ...');

});

0 голосов
/ 18 января 2012

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

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

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

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