Должен ли я использовать window.onload или script блок?

У меня есть функция javascript, которая управляет DOM при ее вызове (добавляет классы CSS и т.д.). Это вызывается, когда пользователь меняет некоторые значения в форме. Когда документ загружается первым, я хочу вызвать эту функцию для подготовки исходного состояния (что проще в этом случае, чем настройка DOM со стороны сервера в правильное начальное состояние).

Лучше ли использовать window.onload для выполнения этой функции или иметь блок script после элементов DOM, которые мне нужно изменить? В любом случае, почему это лучше?

Например:

function updateDOM(id) {
    // updates the id element based on form state
}

я должен вызвать его через:

window.onload = function() { updateDOM("myElement"); };

или

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

Первый, по-видимому, стандартный способ сделать это, но последний кажется таким же хорошим, может быть, лучше, поскольку он обновит элемент, как только будет поражен script, и пока он будет помещен после элемента я не вижу проблемы с ним.

Любые мысли? Является ли одна версия действительно лучше, чем другая?

Ответы

Ответ 1

Определенно используйте onload. Держите свои сценарии отдельно от своей страницы, или вы сойдете с ума, пытаясь распутать их позже.

Ответ 2

Событие onload считается правильным способом, но если вы не против использования javascript-библиотеки, jQuery $(document).ready() еще лучше.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

Преимущества:

  • Вызовите $(document).ready() столько раз, сколько хотите зарегистрировать дополнительный код для запуска - вы можете только установить window.onload один раз.
  • $(document).ready() действия происходят, как только DOM завершается - window.onload должен ждать изображений и т.д.

Надеюсь, я не становлюсь The Guy, который предлагает jQuery для каждого JavaScript-вопроса, но это действительно здорово.

Ответ 3

Я написал много Javascript и window.onload - это ужасный способ сделать это. Он хрупкий и ждет, пока каждый ресурс страницы не загрузится. Поэтому, если одно изображение берет навсегда или ресурс не истекает до 30 секунд, ваш код не будет запускаться, прежде чем пользователь сможет видеть/манипулировать страницей.

Кроме того, если другой кусок Javascript решит использовать window.onload = function() {}, ваш код будет удален.

Правильный способ запуска кода, когда страница готова, - это ждать, когда элемент, который вам нужно изменить, готов/доступен. Многие библиотеки JS имеют встроенные функции.

Отъезд:

Ответ 4

Некоторые фреймворки JavaScript, такие как mootools, дают вам доступ к специальному событию с именем "domready" :

Содержит окно Event "domready", которое будет выполняться при загрузке DOM. Чтобы гарантировать, что элементы DOM существуют, когда код, пытающийся получить к ним доступ, выполняется, они должны быть помещены в событие "domready".

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Ответ 5

window.onload в IE ожидает, что бинарная информация также будет загружена. Это не строгое определение "когда DOM загружен". Таким образом, может быть значительное отставание между тем, когда страница воспринимается как загружаемая и когда ваш script запущен. Из-за этого я бы порекомендовал заглянуть в одну из обширных JS-фреймворков (прототип/jQuery), чтобы справиться с тяжелым подъемом для вас.

Ответ 7

В то время как я согласен с другими относительно использования window.onload, если возможно, для чистого кода, я уверен, что window.onload будет вызываться снова, когда пользователь нажимает кнопку "Назад" в IE, но не получает вызов снова в Firefox. (Если только они не изменили его в последнее время).

Изменить: я мог бы это сделать назад.

В некоторых случаях необходимо использовать inline script, когда вы хотите, чтобы ваш script был оценен, когда пользователь нажимает кнопку "Назад" с другой страницы, обратно на вашу страницу.

Любые поправки или дополнения к этому ответу приветствуются... Я не эксперт по javascript.

Ответ 8

@The Geek

Я уверен, что window.onload будет вызываться снова, когда пользователь нажимает кнопку "Назад" в IE, но не получает вызов в Firefox. (Если они не изменили его в последнее время).

В Firefox, onload вызывается, когда DOM закончил загрузку, независимо от того, как вы перешли на страницу.

Ответ 9

Мое занятие - это первое, потому что у вас может быть только 1 функция window.onload, в то время как встроенные script блокируют ваше число n.

Ответ 10

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