Есть ли способ зафиксировать, когда содержимое 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.
});
Вот рабочий пример: