Подгрузка Iframe C Помощью Javascript
Процесс загрузки HTML-документа, условно, состоит из трёх стадий:
- DOMContentLoaded – браузер полностью загрузил HTML, и построил DOM-дерево.
- load – браузер загрузил все ресурсы.
- beforeunload/unload – уход со страницы.
Все эти стадии очень важны. На каждую можно повесить обработчик, чтобы совершить полезные действия:
- DOMContentLoaded – означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
- load – страница и все ресурсы загружены, используется редко, обычно нет нужды ждать этого момента.
- beforeunload/unload – можно проверить, сохранил ли посетитель изменения, уточнить, действительно ли он хочет покинуть страницу.
Далее мы рассмотрим важные детали этих событий.
Событие DOMContentLoaded происходит на document и поддерживается во всех браузерах, кроме IE8-. Про поддержку аналогичного функционала в старых IE мы поговорим в конце главы.
Обработчик на него вешается только через addEventListener:
document.addEventListener("DOMContentLoaded", ready);
Пример:
function ready { alert( 'DOM готов' ); alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight ); } document.addEventListener("DOMContentLoaded", ready);
В примере выше размеры обработчик DOMContentLoaded сработает сразу после загрузки документа, не дожидаясь получения картинки.
Поэтому на момент вывода alert и сама картинка будет невидна и её размеры – неизвестны (кроме случая, когда картинка взята из кеша браузера).
В своей сути, событие onDOMContentLoaded – простое, как пробка. Полностью создано DOM-дерево – и вот событие. Но с ним связан ряд существенных тонкостей.
Если в документе есть теги , то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.
Source: learn.javascript.ru