В JavaScript, когда я хочу запустить script один раз, когда страница загрузилась, следует использовать window.onload или просто написать script?
Например, если у меня есть всплывающее окно, я должен писать (непосредственно внутри тега <script>):
alert("hello!");
Или:
window.onload = function() {
alert("hello!");
}
Оба запускаются сразу после загрузки страницы. В чем разница?
Первый запускается, когда браузер добирается до него.
Второй пользователь ожидает загрузки окна перед его запуском.
В общем, вы должны сделать второе, но вам нужно прикрепить к нему прослушиватель событий, а не определять функцию. Например:
window.addEventListener('load',
function() {
alert('hello!');
}, false);
Здесь документация по MDN.
В соответствии с этим:
Событие загрузки запускается в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения и подкадры завершили загрузку.
Ваш первый фрагмент кода будет запущен, как только браузер ударит это место в HTML.
Второй фрагмент вызовет всплывающее окно, когда DOM и все изображения будут полностью загружены (см. спецификации).
Учитывая функцию alert(), не имеет значения, в какой момент она будет работать (она не зависит ни от чего, кроме объекта window). Но если вы хотите манипулировать DOM - вам обязательно нужно дождаться, когда он будет правильно загружен.
Другие ответы на все выглядят устаревшими
Во-первых, установка сценариев вверху и использование window.onload - это анти-шаблон. Он остался с IE дней в лучшем случае или неправильно понимает JavaScript и браузер в худшем случае.
Вы можете просто переместить свои скрипты в нижней части html
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
Единственная причина, по которой люди использовали window.onload, - это то, что они ошибочно полагали, что скрипты необходимы для перехода в раздел head. Поскольку все выполняется в том случае, если ваш script находился в главном разделе, тогда тело и ваш контент еще не существовали по определению исполнения в порядке.
Хакерное обходное решение заключалось в использовании window.onload для ожидания загрузки остальной страницы. Перемещение вашего script в нижнюю часть также решило эту проблему, и теперь нет необходимости использовать window.onload, так как ваше тело и контент уже будут загружены.
Более современное решение заключается в использовании тега defer на ваших сценариях, но для использования того, что ваши скрипты должны быть внешними.
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
Это имеет то преимущество, что браузер сразу начнет загрузку скриптов, и он выполнит их в указанном порядке, но он будет ждать, чтобы выполнить их до тех пор, пока страница не загрузится, не нужно window.onload или лучше, но все же unneeded window.addEventListener('load', ...
Причиной ожидания загрузки DOM является то, что вы можете настроить таргетинг на любые элементы, которые загружаются после вашего script. Если вы просто создаете alert, это не имеет значения. Скажем, однако, что вы нацелились на div, который был в вашей разметке после вашего script, вы получите ошибку, если не дождитесь загрузки этой части дерева DOM.
document.ready - отличная альтернатива window.onload, если вы используете jQuery.
Смотрите здесь: window.onload vs $(document).ready()
Это зависит от того, хотите ли вы его запустить, когда встречается элемент script или если вы хотите, чтобы он запускался при загрузке события загрузки (который после загрузки всего документа (включая такие вещи, как изображения)).
Ни один из них не всегда прав.
В целом, однако, я бы избегал назначать функции непосредственно onload в пользу использования addEventListener (с библиотеками совместимости, если Мне нужно было поддерживать старые браузеры).
У вас есть три варианта:
Непосредственно внутри тега script выполняется его, как только он разбирается.
Внутри document.addEventListener( "DOMContentLoaded", function(){}); будет запускаться его, когда DOM готов.
Внутри window.onload function(){}) будет запущен, как только будут загружены все ресурсы страницы.