Если вы используете сторонний JavaScript-фреймворк / инструментарий / библиотеку, он, вероятно, предоставляет функцию / метод, который позволяет выполнять код после полной загрузки DOM. Например, Dojo Toolkit предоставляет dojo.addOnLoad . Точно так же jQuery предоставляет Events / ready (или его сокращенную форму , доступную путем передачи функции непосредственно в объект jQuery).
Если вы придерживаетесь простого JavaScript, то хитрость заключается в использовании обработчика события window.onload. Несмотря на то, что это в конечном итоге приведет к тому же результату, window.onload выполняется после того, как страница - и все на ней, включая изображения, - полностью загружена, тогда как вышеупомянутые библиотеки определяют первый момент, когда DOM готов, перед загрузкой изображений.
Если вам нужен доступ к DOM из сценария в заголовке, это также будет предпочтительной альтернативой добавлению сценариев в конец документа.
Например (используя window.onload):
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
window.onload = function () {
alert(document.getElementsByTagName("body")[0].className);
};
</script>
<style type="text/css">
.testClass { color: green; background-color: red; }
</style>
</head>
<body class="testClass">
<p>Test Content</p>
</body>
</html>
Это позволит вам запланировать выполнение определенных действий после завершения загрузки страницы. Чтобы увидеть этот эффект в действии, сравните приведенный выше скрипт со следующим, который блокирует загрузку страницы до тех пор, пока вы не отключите модальное окно предупреждения:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
alert("Are you seeing a blank page underneath this alert?");
</script>
<style type="text/css">
.testClass { color: green; background-color: red; }
</style>
</head>
<body class="testClass">
<p>Test Content</p>
</body>
</html>
Если вы уже определили window.onload или если вы обеспокоены тем, что можете переопределить его и сломать сторонние скрипты, используйте этот метод для добавления - а не переопределения - window.onload. (Это слегка измененная версия функции addLoadEvent Саймона Уиллисона .)
if (!window.addOnLoad)
{
window.addOnLoad = function (f) {
var o = window.onload;
window.onload = function () {
if (typeof o == "function") o();
f();
}
};
}
Сценарий из первого примера, модифицированный для использования этого метода:
window.addOnLoad(function () {
alert(document.getElementsByTagName("body")[0].className);
});
Изменено для использования Dojo:
dojo.addOnLoad(function () {
alert(document.getElementsByTagName("body")[0].className);
});
Изменено для использования jQuery:
$(function () {
alert(document.getElementsByTagName("body")[0].className);
});
Итак, теперь, когда вы можете выполнять код при загрузке страницы, вы, вероятно, захотите динамически загружать внешние скрипты. Как и в предыдущем разделе, большинство основных инфраструктур / инструментов / библиотек предоставляют метод для этого.
Или вы можете свернуть свои собственные:
if (!window.addScript)
{
window.addScript = function (src, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = src;
script.type = "text/javascript";
head.appendChild(script);
if (typeof callback == "function") callback();
};
}
window.addOnLoad(function () {
window.addScript("example.js");
});
С Dojo ( dojo.io.script.attach ):
dojo.addOnLoad(function () {
dojo.require("dojo.io.script");
dojo.io.script.attach("exampleJsId", "example.js");
});
С помощью jQuery ( jQuery.getScript ):
$(function () {
$.getScript("example.js");
});