Есть ли способ зафиксировать, когда содержимое iframe полностью загружено с родительской страницы?
Есть ли способ зафиксировать, когда содержимое iframe полностью загружено с родительской страницы?
Ответы:
<iframe>у элементов есть loadсобытие для этого.Как вы слушаете это событие, зависит от вас, но, как правило, лучший способ заключается в следующем:
1) создайте свой iframe программно
Он гарантирует, что ваш loadслушатель всегда вызывается, прикрепляя его до начала загрузки iframe.
<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...';
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>
2) встроенный javascript - это еще один способ, который вы можете использовать внутри вашей HTML-разметки.
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>
3) Вы также можете прикрепить прослушиватель событий после элемента внутри <script>тега, но имейте в виду, что в этом случае есть небольшая вероятность того, что iframe уже загружен к тому времени, когда вы добавите свой слушатель. Поэтому возможно, что он не будет вызываться (например, если iframe очень-очень быстрый или поступает из кеша).
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>
Также посмотрите мой другой ответ о том, какие элементы могут также инициировать этот тип loadсобытия
addEventListenerкоторый позволяет запускать несколько обратных вызовов при событии загрузки.
Ни один из приведенных выше ответов не помог мне, но это сработало.
ОБНОВЛЕНИЕ :
Как отметил @doppleganger ниже, загрузка отсутствует с jQuery 3.0, поэтому здесь используется обновленная версия on. Обратите внимание, что на самом деле это работает на jQuery 1.7+, поэтому вы можете реализовать его таким образом, даже если вы еще не используете jQuery 3.0.
$('iframe').on('load', function() {
// do stuff
});
loadбольше нет. Пожалуйста, используйте .on('load', function() { ... })вместо этого.
jqueryили, jqLiteто это путь!
Для этого есть другой последовательный способ ( только для IE9 + ) в JavaScript:
const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');
iframe.addEventListener('load', handleLoad, true)
И если вас интересуют Observables, это поможет:
return Observable.fromEventPattern(
handler => iframe.addEventListener('load', handler, true),
handler => iframe.removeEventListener('load', handler)
);
handleLoad()до того, как я увижу визуализацию iFrame? Я надеюсь, что это чисто проблема с рендерингом, а не с загрузкой контента.
Обратите внимание, что событие onload, похоже, не срабатывает, если iframe загружается вне экрана. Это часто происходит при использовании вкладок «Открыть в новом окне» / w.
Вы также можете записать событие готовности jquery следующим образом:
$('#iframeid').ready(function () {
//Everything you need.
});
Вот рабочий пример: