Window.onload против <body onload = "" />
В чем именно разница между событием window.onload и событием onload тега body? когда я использую что и как это нужно делать правильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 13
Есть разница нет ...
Так что принципиально вы можете использовать оба (по одному! -)
Но для удобства чтения и чистоты html-кода я всегда предпочитаю window.onload! O]
Если вы пытаетесь написать ненавязчивый JS-код (а вы должны это делать), вам не следует использовать <body onload = "">.
Насколько я понимаю, разные браузеры обрабатывают эти два параметра немного по-разному, но работают они одинаково. В большинстве браузеров, если вы определите оба, один будет проигнорирован.
Я предпочитаю, как правило, нет использовать событие <body onload = "">. Я думаю, что будет проще держать поведение отдельно от контента, насколько это возможно.
Тем не менее, есть случаи (обычно довольно редкие для меня), когда использование нагрузки на тело может немного повысить скорость.
Мне нравится использовать Prototype, поэтому я обычно помещаю что-то вроде этого в <head> моей страницы:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
или же
Event.observe(window, 'load', function(){
alert('Window onload');
});
Вышеупомянутые уловки я изучил здесь. Мне очень нравится концепция обработчиков событий присоединения вне HTML.
(Отредактируйте, чтобы исправить орфографическую ошибку в коде.)
В каких случаях это было бы быстрее и почему?
Этот ответ кажется очень субъективным со всеми «я» («предпочитаю», «я думаю»). То, что в дальнейшем отсутствуют какие-либо объективные и проверяемые факты, в значительной степени подтверждает это впечатление.
Я бы отнесся к этому ответу с недоверием, учитывая, что он был опубликован более 6 лет назад. Вы можете обновить его или опубликовать свой улучшенный ответ.
Оба они работают одинаково. Однако обратите внимание, что если оба определены, будет вызван только один из них. Я обычно избегаю использования любого из них напрямую. Вместо этого вы можете прикрепить обработчик событий к событию загрузки. Таким образом, вы можете легко включить другие пакеты JS, которым также может потребоваться присоединить обратный вызов к событию onload.
Любая платформа JS будет иметь кросс-браузерные методы для обработчиков событий.
window.onload = myOnloadFunc и <body onload = "myOnloadFunc();"> - это разные способы использования то же событие. Однако использование window.onload менее навязчиво - оно убирает ваш JavaScript из HTML.
Все распространенные библиотеки JavaScript, Prototype, ExtJS, Dojo, JQuery, YUI и т. д. Предоставляют удобные оболочки для событий, которые происходят при загрузке документа. Вы можете прослушивать событие onLoad в окне и реагировать на него, но onLoad не запускается, пока не будут загружены все ресурсы, поэтому ваш обработчик событий не будет выполняться, пока не будет получено последнее огромное изображение. В некоторых случаях это именно то, что вам нужно, в других вы можете обнаружить, что более подходящим является прослушивание, когда DOM готова - это событие похоже на onLoad, но срабатывает без ожидания загрузки изображений и т. д.
Однако следует отметить, что есть разница. Событие inline onload будет вызывать myOnloadFunc() в глобальном контексте (this будет ссылаться на window). Установка его через javascript заставит его выполняться в контексте элемента (this относится к элементу, на котором было инициировано событие). В этом конкретном случае это не будет иметь значения, но будет с другими элементами.
@Walkerneo: Да, определенно стоит отметить. Конечно, используя JS-библиотеку, можно при желании переопределить объект, на который ссылается this.
@RichardTurner Вам не нужно использовать библиотеку для изменения привязки контекста. Это делает простой вызов .bind ()
@Kloar, в наши дни, да, но вам нужен MSIE9 +. На более старом MSIE, который был гораздо более распространенным, когда я отвечал, вам понадобится полифилл.
Это общепринятый стандарт, когда контент, макет и поведение разделены. Таким образом, window.onload () будет более подходящим для использования, чем <body onload = "">, хотя оба они выполняют одинаковую работу.
Думайте о onload как о любом другом атрибуте. Например, в поле ввода можно указать:
<input id = "test1" value = "something"/>
Или вы можете вызвать:
document.getElementById('test1').value = "somethingelse";
Атрибут onload работает так же, за исключением того, что в качестве значения он принимает функцию, а не строку, как это делает атрибут value. Это также объясняет, почему вы можете «использовать только один из них» - вызов window.onload переназначает значение атрибута onload для тега body.
Кроме того, как здесь говорят другие, обычно лучше хранить стиль и javascript отдельно от содержимого страницы, поэтому большинство людей советуют использовать window.onload или аналогичные функции jQuery ready.
<body onload = ""> должен переопределить window.onload.
С <body onload = ""> document.body.onload может иметь значение null, undefined или функцию в зависимости от браузера (хотя getAttribute ("onload") должен быть в некоторой степени согласованным для получения тела анонимной функции в виде строки) . С помощью window.onload, когда вы назначаете ему функцию, window.onload будет функцией, согласованной во всех браузерах. Если это важно для вас, используйте window.onload.
window.onload в любом случае лучше отделить JS от вашего контента. В любом случае нет особых причин использовать <body onload = "">, когда можно использовать window.onload.
В Opera целью события для window.onload и <body onload = ""> (и даже window.addEventListener ("load", func, false)) будет окно вместо документа, как в Safari и Firefox. Но «это» будет окном во всех браузерах.
Это означает, что, когда это имеет значение, вы должны обернуть грязь и сделать вещи согласованными или использовать библиотеку, которая сделает это за вас.
Разницы нет, но и использовать не стоит.
Во многих браузерах событие window.onload не запускается, пока не будут загружены все изображения, а это не то, что вам нужно. В браузерах на основе стандартов есть событие DOMContentLoaded, которое запускается раньше, но не поддерживается IE (на момент написания этого ответа). Я бы рекомендовал использовать библиотеку javascript, которая поддерживает кроссбраузерную функцию DOMContentLoaded, или найти хорошо написанную функцию, которую вы можете использовать. $(document).ready() от jQuery - хороший тому пример.
Вопрос из будущего ... Что делать, если нет jquery?
Вопрос из настоящего .. Что делать, если jQuery является излишним для данного проекта? (Не выбивая jQuery, использую сам. Просто иногда требуется только одна функция из библиотеки ..)
Когда вы говорите «не поддерживается IE», это универсальная правда или только для определенных версий IE? Поскольку с тех пор, как вы написали этот ответ, в мире браузеров многое изменилось, может быть, пришло время обновить этот ответ?
DOMContentLoaded теперь поддерживается IE9 и выше: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Я знаю, что это старый, но как-то наткнулся на него. @BradleyForster Я использовал DomReady.js, кажется, работает хорошо. Не уверен, что они уже перешли на github: code.google.com/p/domready
Отчетность из будущего, DOMContentLoaded теперь поддерживается всеми основными браузерами: caniuse.com/#feat=domcontentloaded
@Sid Не может быть «никакого jQuery» в том виде, в каком он существует сейчас. Вы всегда можете разместить его у себя. Также jcampbell1 Откуда вы знаете, что ОП не хочет этого?
jQuery бесполезен для некоторых подобных функций, и все, что вы можете с ним делать, вы можете делать с помощью vanilla JS.
'так много субъективных ответов на объективный вопрос. «Ненавязчивый» JavaScript - это суеверие, подобное старому правилу никогда не использовать gotos. Пишите код таким образом, чтобы он помог вам надежно достичь своей цели, а не в соответствии с чьими-то модными религиозными убеждениями.
Всем, кто найдет:
<body onload = "body_onload();">
чрезмерно отвлекать - это чрезмерно претенциозно и неправильно расставлять приоритеты.
Обычно я помещаю свой код JavaScript в отдельный файл .js, но я не нахожу ничего обременительного в подключении обработчиков событий в HTML, который, кстати, является допустимым HTML.
Есть веская причина писать ненавязчивый javascript. Допустим, у вас есть веб-приложение со 100 страницами, и вы использовали метод <body onload = "body_onload ();"> вместо того, чтобы помещать его в файл javascript, включенный на каждой странице. Затем представьте, что вам по какой-то причине нужно изменить имя этой функции. Помещение события во включенный файл javascript 1) значительно упрощает внесение изменений и 2) экономит ресурсы сервера, поскольку файлы javascript можно кэшировать в течение года (на правильно настроенном сервере) вместо того, чтобы загружать один и тот же код снова и снова.
Итак, поскольку вы не утруждаетесь изучением того, почему что-то рекомендуется, вы называете рекомендации «модными религиозными убеждениями» ??
Вопрос в том, «в чем разница между этими двумя методами?», Вместе с запросом рекомендации, какой из них лучше. Как ваш ответ отвечает на этот вопрос?
Любая ситуация, когда вы создаете модульное решение в одном месте, которое можно применить к большой массе файлов, намного лучше, чем добавление кода к каждой массе файлов как таковой. Это лучше для первоначального времени сборки, для организационных целей кода, для удобства чтения и для будущего редактирования. Это не модно, это на самом деле более старая концепция, присутствующая в таких языках, как java и C++, которую веб-программисты теперь принимают как гораздо лучший способ программирования.
Хорошей защитой от XSS-атак в современных браузерах является отключение всего встроенного JavaScript в вашей Политике безопасности контента. Это довольно хорошая причина не использовать атрибут onload в вашем HTML.
window.onload может работать без корпуса. Создайте страницу только с тегами скрипта и откройте ее в браузере. Страница не содержит тела, но все равно работает ..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
HTML без тега body недействителен, если вы действительно добавляете контент (который должен быть в теге body). Также в вашем теге скрипта отсутствует тип. Никогда не полагайтесь на то, что браузеры исправят ваш нестандартный код! (Поскольку браузеры могут делать это по-другому или вообще не делать этого в прошлом или будущем.)
@Kissaki: Стандартный HTML вообще не нуждается в теге body!
xhtml1 указывает <!ELEMENT html (head, body)> [1] - а html401 указывает <!ELEMENT HTML O O (%html.content;) с <!ENTITY % html.content "HEAD, BODY"> [2]. html51 также указывает A head element followed by a body element. для содержимого html. [3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strictw3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strictw3.org/TR/html51/semantics.html#the-html-element - Итак, я предполагаю, что все эти распространенные / используемые стандарты HTML делать требуют тега тела. :)
@Kissaki, это XHTML, а не HTML. HTML допускает пропуск тегов как начальных, так и конечных тегов тела, а также опускание тегов html и заголовков в соответствии с его SGML DTD. w3.org/TR/html401/struct/global.html#edef-BODYStart tag: optional, End tag: optional
Если вы хотите использовать именно HTML4, а не HTML5, конечно. HTML5 будет совместим с HTML4, но не наоборот. Так что, если вы действительно хотите писать код только в течение последнего десятилетия, продолжайте.
@Kissaki: html5 больше не нужен тип скрипта (если это javascript), вы правы для более ранних версий.
window.onload - вызывается после того, как все файлы DOM, JS, изображения, фреймы, расширения и другие полностью загружены. Это равно $ (window) .load (function () {});
body onload = "" - вызывается после загрузки DOM. Это равно $ (document) .ready (function () {});
Кто-нибудь может это найти? Я видел это заявление на многих форумах, но ни разу со ссылкой на то, где оно определено в спецификации.
@crempp Есть Элемент тела и Глобальные атрибуты, поэтому я бы сказал, что это неправда. Но вы можете проверить это сами, см. jsbin.com/OmiViPAJ/1/edit. Здесь вы можете видеть, что событие загрузки изображения запускается до событие загрузки тела.
Этот ответ противоречит другим; вы можете предоставить источник?
Этот ответ совершенно неверен и не должен иметь голосов за. Фактически, этот тип ответа обычно называют одним из самых больших заблуждений о событиях ready и onload. load срабатывает после загрузки всего документа, включая все сценарии, изображения и таблицы стилей. DOMContentLoaded срабатывает после построения дерева DOM, но до образов и т. д. Его DOMContentLoaded эквивалентен document.ready, а не load.
Извините за реинкарнацию этой ветки снова после еще 3 лет сна, но, возможно, я наконец нашел неоспоримое преимущество window.onload=fn1; над <body onload = "fn1()">. Это касается JS модули или Модули ES: когда ваш обработчик onload находится в «классическом» JS-файле (т. Е. Упоминается без <script type = "module" … >, возможен любой путь; когда ваш обработчик onload находится в «модульном» JS-файле (т.е. упоминается с <script type = "module" … >, <body onload = "fn1()"> не работает) с ошибкой "fn1 () is not defined". Возможно, причина в том, что модули ES не загружаются до анализа HTML ... но это только мое предположение. Во всяком случае, window.onload=fn1; отлично работает с модулями ...
вы должны использовать "чтобы окружить значение атрибута