Во-первых, я вижу, что этот вопрос задавался несколько раз, но ответы не кажутся удовлетворительными. Я ищу, чтобы иметь возможность вызвать script в любое время и определить, загружен ли iframe, и не ограничивать script требованием быть добавленным к самому тегу iframe в свойстве onload.
Вот некоторые предпосылки: я работал над ненавязчивым script, чтобы попытаться определить, загружены ли локальные фреймы в dom, это потому, что один из наших клиентов включает в себя формы на своем веб-сайте в iframe, и многие из них открываются в лайтбоксах, которые динамически добавляют iframes в dom в любое время. Я могу прикрепить к открытому событию лайтбокса, но его ударить или пропустить, могу ли я "поймать" iframe перед его загрузкой.
Позвольте мне объяснить немного больше.
В моем тестировании я определил, что событие onload будет срабатывать только один раз - и только если он привязан до фактического загрузки iframe. Например: на этой странице должно быть указано только "добавлено в тег iframe", и слушатель, который прикреплен после этого, не срабатывает - для меня это имеет смысл. (Я использую свойство iframe onload для простого примера).
https://jsfiddle.net/g1bkd3u1/2/
<script>
function loaded () {
alert ("added to iframe tag");
$("#test").load(function(){
alert("added after load finished");
});
};
</script>
<iframe onload="loaded()" id="test" src="https://en.wikipedia.org/wiki/HTML_element#Frames"></iframe>
Мой следующий подход состоял в проверке состояния готовности документа iframe, который работает почти во всех моих тестах, кроме chrome, который сообщает "complete" - я ожидал "Access Denied" для запроса перекрестного домена. Я в порядке с ошибкой в перекрестном домене, потому что я могу игнорировать iframe, так как меня интересуют только локальные фреймы. Отчеты firefox "unintialized", с которыми я в порядке, потому что я знаю, что могу прикрепить событие onload.
Откройте Chrome: https://jsfiddle.net/g1bkd3u1/
<iframe id="test" src="https://en.wikipedia.org/wiki/HTML_element#Frames"></iframe>
<script>
alert($("#test").contents()[0].readyState);
</script>
Я обнаружил, что, если я жду только 100 мс, тогда iframe, кажется, сообщает, как и ожидалось (исключение перекрестной безопасности - это то, что я хочу - но я не хочу ждать произвольной длины).
https://jsfiddle.net/g1bkd3u1/4/
<iframe id="test" src="https://en.wikipedia.org/wiki/HTML_element#Frames"></iframe>
<script>
setTimeout(function () {
try {
alert($("#test").contents()[0].readyState);
} catch (ignore) {
alert("cross domain request");
}
}, 100);
</script>
Мое текущее решение/решение состоит в том, чтобы добавить обработчик события onload, затем отделить iframe от dom, а затем вставить его обратно в dom в том же месте - теперь вызывается событие onload. Вот пример, ожидающий 3 секунды (надеясь, что у него достаточно времени для загрузки iframe), чтобы показать, что отсоединение и повторное присоединение приводят к срабатыванию события onload iframe.
https://jsfiddle.net/g1bkd3u1/5/
<iframe id="test" src="https://en.wikipedia.org/wiki/HTML_element#Frames"></iframe>
<script>
setTimeout(function(){
var placeholder = $("<span>");
$("#test").load(function(){
alert("I know the frame has loaded now");
}).after(placeholder).detach().insertAfter(placeholder);
placeholder.detach();
}, 3000);
</script>
Пока это работает, мне остается задаться вопросом, есть ли более элегантные методы проверки загрузки iframe (ненавязчиво)?
Спасибо за ваше время.