Должен ли я использовать 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.Держите свои скрипты отдельно от своей страницы, иначе вы сойдёте с ума, пытаясь распутать их позже.

Answer 2

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

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

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

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

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

Answer 3

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

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

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

Проверить:

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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

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

Answer 9

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

Answer 10

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