Не происходит событие onload если была нажата ссылка

267

04 мая 2017, 11:59

На странице есть ссылка с телефоном в url. При нажатии на нее в chrome, firefox появляется диалог, позволяющий выбрать приложение для ее открытия (если до этого не был установлен чекбокс "запомнить выбор").

Если нажать на эту ссылку до полной загрузки страницы, событие window.onload не произойдет.

<!DOCTYPE html> 
<html> 
<head> 
    <title>title</title> 
    <script> 
        window.onload = function () { 
            alert('onload') 
        } 
    </script> 
</head> 
<body> 
<a href="tel:1234">link</a> 
</body> 
</html>

С чем это связано? Как обойти это поведение? Есть спецификация, описывающая этот момент?

Answer 1

Событие onload на window (window.onload) срабатывает, когда загружается вся страница, включая ресурсы на ней – стили, картинки, ифреймы и т.п.

То есть, страница еще не загружена, а вы выполнили другое действие. Попробуйте заменить window.onload на DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() { 
  alert('DOM fully loaded and parsed') 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <title>title</title> 
</head> 
 
<body> 
  <a href="tel:1234">link</a> 
</body> 
 
</html>

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

Также, в этом источнике есть вот такой пункт (подробнее в ссылках):

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