window.onload vs <body onload = "" /> - PullRequest
Новая
       54

window.onload vs <body onload = "" />

219 голосов
/ 10 октября 2008

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

Ответы [ 13 ]

209 голосов
/ 10 октября 2008

window.onload = myOnloadFunc и <body onload="myOnloadFunc();"> - это разные способы использования одного и того же события . Использование window.onload менее навязчиво - оно убирает ваш JavaScript из HTML.

Все распространенные библиотеки JavaScript, Prototype, ExtJS, Dojo, JQuery, YUI и т. Д. Предоставляют удобные оболочки для событий, которые происходят при загрузке документа. Вы можете прослушивать событие окна onLoad и реагировать на него, но onLoad не запускается до тех пор, пока не будут загружены все ресурсы, поэтому ваш обработчик событий не будет выполняться до тех пор, пока не будет получено последнее огромное изображение. В некоторых случаях это именно то, что вам нужно, в других вы можете обнаружить, что прослушивание, когда DOM готов, более уместно - это событие похоже на onLoad, но запускается без ожидания загрузки изображений и т. Д.

31 голосов
/ 10 октября 2008

Нет никакой разницы, но вы также не должны использовать.

Во многих браузерах событие window.onload не запускается до тех пор, пока не будут загружены все изображения, а это не то, что вам нужно. В основанных на стандартах браузерах есть событие с именем DOMContentLoaded, которое срабатывает раньше, но не поддерживается IE (на момент написания этого ответа). Я бы рекомендовал использовать библиотеку javascript, которая поддерживает кросс-браузерную функцию DOMContentLoaded, или найти хорошо написанную функцию, которую вы можете использовать. jQuery's $(document).ready(), является хорошим примером.

20 голосов
/ 22 апреля 2010

window.onload может работать без тела. Создайте страницу только с тегами скрипта и откройте ее в браузере. На странице нет тела, но она все еще работает .. 

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>
10 голосов
/ 10 октября 2008

Обычно я предпочитаю , а не использовать событие <body onload="">. Я думаю, что чище держать поведение как можно дальше от контента.

Тем не менее, есть случаи (обычно довольно редкие для меня), когда использование нагрузки от тела может дать небольшое ускорение.

Мне нравится использовать Prototype, поэтому я обычно помещаю нечто подобное в <head> моей страницы: 

document.observe("dom:loaded", function(){
  alert('The DOM is loaded!');
});

или 

Event.observe(window, 'load', function(){
  alert('Window onload');
});

Выше приведены трюки, которые я выучил здесь . Мне очень нравится концепция обработчиков событий присоединения вне HTML.

(Изменить для исправления орфографической ошибки в коде.)

5 голосов
/ 11 сентября 2009

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

Любой, кто найдет: 

 <body onload="body_onload();">

чрезмерно отвлекать - это слишком претенциозно и у них нет четких приоритетов.

Обычно я помещаю свой код JavaScript в отдельный файл .js, но я не нахожу ничего сложного в подключении обработчиков событий в HTML, который, кстати, является допустимым HTML.

3 голосов
/ 28 октября 2013

window.onload - вызывается после полной загрузки всех файлов DOM, JS, изображений, фреймов, расширений и других. Это равно $ (window) .load (function () {});

body onload="" - вызывается после загрузки DOM. Это равно $ (document) .ready (function () {});

3 голосов
/ 10 октября 2008

Существует нет разница ...

Так что принципиально вы можете использовать оба (по одному! -)

Но ради удобочитаемости и чистоты HTML-кода я всегда предпочитаю window.onload! O]

1 голос
/ 10 октября 2008

должен переопределить window.onload.

При document.body.onload может быть нулевым, неопределенным или функцией, зависящей от браузера (хотя getAttribute ("onload") должен быть несколько согласованным для получения тела анонимной функции как строка). С помощью window.onload, когда вы назначаете ему функцию, window.onload будет функцией в разных браузерах. Если это важно для вас, используйте window.onload.

window.onload лучше в любом случае лучше отделить JS от вашего контента. Нет особой причины использовать в любом случае, когда вы можете использовать window.onload.

В Opera целью событий для window.onload и (и даже window.addEventListener ("load", func, false)) будет окно вместо документа, как в Safari и Firefox , Но «это» будет окном в браузерах.

Это означает, что, когда это имеет значение, вы должны обернуть руду и привести все в соответствие или использовать библиотеку, которая сделает это за вас.

1 голос
/ 10 октября 2008

Думайте о нагрузке как о любом другом атрибуте. Например, в поле ввода можно указать: 

<input id="test1" value="something"/>

Или вы можете позвонить: 

document.getElementById('test1').value = "somethingelse";

Атрибут onload работает так же, за исключением того, что он принимает функцию в качестве значения вместо строки, как атрибут value. Это также объясняет, почему вы можете «использовать только один из них» - вызывая window.onload переназначает значение атрибута onload для тега body.

Кроме того, как и другие здесь говорят, обычно лучше держать стиль и javascript отдельно от содержимого страницы, поэтому большинство людей советуют использовать window.onload или как функцию готовности jQuery.

1 голос
/ 10 октября 2008

Если вы пытаетесь написать ненавязчивый код JS (и вам следует), то вам не следует использовать <body onload="">.

Насколько я понимаю, разные браузеры работают с этими двумя немного по-разному, но работают одинаково. В большинстве браузеров, если вы определите оба, один из них будет проигнорирован.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...