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

Question

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

Лучше использовать window.onload для выполнения этой функции или иметь блок скрипта после элементов 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>

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

Есть мысли? Действительно ли одна версия лучше другой?

Answer 1

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

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

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

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

Я надеюсь, что я не стану Парнем, который предлагает jQuery на каждый вопрос JavaScript, но это действительно здорово.

Answer 2

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

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

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

Выезд:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 3

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

Answer 4

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

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

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

Answer 5

Вот очень хорошая статья на эту тему:

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 6

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

Answer 7

@ Компьютерщик

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

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

Answer 8

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

Редактировать: Я мог бы иметь это в обратном направлении.

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

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

Answer 9

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

Answer 10

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