Как я могу получить событие 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()' />