Javascript узнать загрузилась страница

Как отследить полную загрузку страницы?

Изначальная задача проста: программно открыть страницу по указанному урлу и что-нибудь сделать после этого, например вывести в консоль инфу о том, что все успешно загрузилось. Но по каким-то абсолютно пока непонятным для меня причинам onload не триггерится на некоторых сайтах, хотя все разрешения вроде бы у сайта есть. Код получился такой:

function loadPage(url) < return new Promise((res, rej) => < let my_lovely_window; try < my_lovely_window = window.open(url) >catch (e) < rej(e); >my_lovely_window.addEventListener('load', res, true); my_lovely_window.addEventListener('error', rej, true); >); > loadPage('/') .then(e => console.log(`page "$< decodeURIComponent(e.target.location.href) >" loaded successfully`)) .catch(e => console.log(`error occurred: `, e))

function loadPage(url) < return new Promise((res, rej) =>< let my_lovely_window; console.log(`starting procedure with url "$< url >"`); try < console.log(' creating window. ') my_lovely_window = window.open(url) console.log(' window created!') >catch (e) < console.log('error!') rej(e); >console.log(' setting listeners. ') my_lovely_window.addEventListener('load', res, true); my_lovely_window.addEventListener('error', rej, true); console.log(' listeners are set!'); >); > loadPage('/') .then(e => console.log(`page "$< decodeURIComponent(e.target.location.href) >" loaded successfully`)) .catch(e => console.log(`error occurred: `, e))

Поведение на разных сайтах (и платформах) разное:
Если выполнить этот код «/» на тостере, то в консоль выведется ошибка без сообщения. Вероятно это из-за редиректа,
В вк не триггерится ни ошибка, ни онлоад 0_0
Википедия.орг открывается нормально, но при попытке открыть не существующую страницу ведёт себя так же как вк — не триггерится не еррор, ни лоад.

Как отследить полную загрузку страницы во всех перечисленных случаях? В том числе как отследить загрузку 404ых страниц?

Источник

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .

Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("load", (event) => >); onload = (event) => >; 

Event type

Examples

Log a message when the page is fully loaded:

.addEventListener("load", (event) =>  console.log("page is fully loaded"); >); 

The same, but using the onload event handler property:

.onload = (event) =>  console.log("page is fully loaded"); >; 

Live example

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label for="eventLog">Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog">textarea> div> 

body  display: grid; grid-template-areas: "control log"; > .controls  grid-area: control; display: flex; align-items: center; justify-content: center; > .event-log  grid-area: log; > .event-log-contents  resize: none; > label, button  display: block; > #reload  height: 2rem; > 

JavaScript

const log = document.querySelector(".event-log-contents"); const reload = document.querySelector("#reload"); reload.addEventListener("click", () =>  log.textContent = ""; setTimeout(() =>  window.location.reload(true); >, 200); >); window.addEventListener("load", (event) =>  log.textContent += "load\n"; >); document.addEventListener("readystatechange", (event) =>  log.textContent += `readystate: $document.readyState>\n`; >); document.addEventListener("DOMContentLoaded", (event) =>  log.textContent += `DOMContentLoaded\n`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Document: DOMContentLoaded event

Событие DOMContentLoaded запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.

Всплытие	да
Отменяемый	Да (хотя указано как простое событие, которое не может быть отменено)
Интерфейс	Event
Свойство обработчика событий	нет

Разные события, load , должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании load , там где DOMContentLoaded было бы более уместным.

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей тормозят разбор DOM так как они загружаются параллельно, «крадя» трафик у основного HTML документа.

Примеры

Основное применение

.addEventListener('DOMContentLoaded', (event) =>  console.log('DOM полностью загружен и разобран'); >); 

Отложенный DOMContentLoaded

script> document.addEventListener('DOMContentLoaded', (event) =>  console.log('DOM полностью загружен и разобран'); >); for( let i = 0; i  1000000000; i++) > // Этот синхронный скрипт откладывает разбор DOM, // так что событие DOMContentLoaded будет запущено позже. script> 

Проверка того, завершена ли загрузка

DOMContentLoaded может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением обработчика.

function doSomething()  console.info('DOM загружен'); > if (document.readyState === 'loading')  // Загрузка ещё не закончилась document.addEventListener('DOMContentLoaded', doSomething); > else  // `DOMContentLoaded` Уже сработал doSomething(); > 

Живые примеры

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label>Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30">textarea> div> 

body  display: grid; grid-template-areas: "control log"; > .controls  grid-area: control; display: flex; align-items: center; justify-content: center; > .event-log  grid-area: log; > .event-log-contents  resize: none; > label, button  display: block; > #reload  height: 2rem; > 

JS

const log = document.querySelector('.event-log-contents'); const reload = document.querySelector('#reload'); reload.addEventListener('click', () =>  log.textContent =''; window.setTimeout(() =>  window.location.reload(true); >, 200); >); window.addEventListener('load', (event) =>  log.textContent = log.textContent + 'load\n'; >); document.addEventListener('readystatechange', (event) =>  log.textContent = log.textContent + `readystate: $document.readyState>\n`; >); document.addEventListener('DOMContentLoaded', (event) =>  log.textContent = log.textContent + `DOMContentLoaded\n`; >); 

Result

Спецификации

Браузерная совместимость

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник