Відповіді:
window.onload = myOnloadFuncі <body onload="myOnloadFunc();">різні способи використання однієї і тієї ж події . Використання window.onloadменш нав'язливе - воно виводить ваш JavaScript з HTML.
Усі загальні бібліотеки JavaScript, Prototype, ExtJS, Dojo, JQuery, YUI тощо надають приємні обгортки навколо подій, які відбуваються під час завантаження документа. Ви можете слухати вікно події OnLoad та реагувати на це, але onLoad не запускається, поки не будуть завантажені всі ресурси, тому обробник подій не буде виконаний, поки не буде отримано останнє величезне зображення. В деяких випадках саме цього ви хочете, в інших ви можете виявити, що прослуховування, коли DOM готовий, є більш підходящим - ця подія схожа на OnLoad, але спрацьовує, не чекаючи завантаження зображень тощо.
myOnloadFunc()в глобальному контексті ( thisбуде посилатися на window). Якщо встановити його через javascript, це змусить його виконувати в контексті елемента ( thisвідноситься до елемента, на якому подія була запущена). У цьому конкретному випадку це не зміниться, але з іншими елементами.
thisзвертається, якщо це потрібно.
Різниці немає, але і не слід використовувати жодне.
У багатьох браузерах window.onloadподія не спрацьовує, поки всі зображення не завантажуються, а це не те, що потрібно. Браузери на основі стандартів мають подію, DOMContentLoadedяка називається раніше, але IE не підтримується (на момент написання цієї відповіді). Я рекомендую використовувати бібліотеку javascript, яка підтримує функцію перехресного веб-переглядача DOMContentLoaded, або знайти добре написану функцію, яку ви можете використовувати. jQuery's $(document).ready()- хороший приклад.
window.onloadможе працювати без тіла. Створіть сторінку лише з тегами сценарію та відкрийте її у браузері. Сторінка не містить жодного тіла, але вона все ще працює ..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script><!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-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html-елемент - Так що я припускаю , що всі ці стандарти HTML загальних / в використанні робить вимагає тега тіла. :)
Start tag: optional, End tag: optional
Як правило, я вважаю за краще не використовувати <body onload=""подію>. Я думаю, що чистіше, щоб максимально тримати поведінку відокремленою від вмісту.
Однак, бувають випадки (як правило, досить рідкісні для мене), коли використання навантаження на організм може дати невеликий приріст швидкості.
Мені подобається використовувати прототип, тому я зазвичай вкладаю щось подібне до <head> моєї сторінки:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});або
Event.observe(window, 'load', function(){
alert('Window onload');
});Вище описані трюки, яких я тут навчився . Мені дуже подобається концепція прикріплення обробників подій поза HTML.
(Змінити, щоб виправити орфографічну помилку в коді.)
'стільки суб'єктивних відповідей на об'єктивне питання. "Ненав'язливий" JavaScript - забобони, як і старе правило ніколи не використовувати gotos. Напишіть код таким чином, що допоможе вам надійно досягти своєї мети, а не відповідно до чиїхось модних релігійних переконань.
Усі, хто знаходить:
<body onload="body_onload();">надмірно відволікатись - це занадто претензійно і не має чітких пріоритетів.
Я звичайно розміщую свій код JavaScript в окремому файлі .js, але я не знаю нічого громозливого в підключенні обробників подій у HTML, що до речі є дійсним HTML.
window.onload- Викликається після того, як повністю завантажені файли DOM, JS, зображення, рамки, розширення та інші. Це дорівнює $ (window) .load (функція () {});
body onload=""- Викликається, коли DOM завантажений. Це дорівнює $ (document) .ready (function () {});
readyпроти onload. loadзапускається після завантаження всього документа, включаючи всі сценарії, зображення та таблиці стилів. DOMContentLoadedпожежі після того, як дерево DOM було побудоване, але перед зображеннями тощо. Це DOMContentLoadedеквівалент не document.ready, ні load.
Якщо ви намагаєтесь написати ненав'язливий JS-код (і вам слід), то не слід використовувати <body onload="">.
Наскільки я розумію, різні браузери поводяться з цими двома різними, але вони працюють аналогічно. У більшості браузерів, якщо ви визначаєте обидва, один із них буде проігноровано.
Подумайте про завантаження, як будь-який інший атрибут. Наприклад, у вікні введення можна поставити:
<input id="test1" value="something"/>Або ви можете зателефонувати:
document.getElementById('test1').value = "somethingelse";Атрибут onload працює так само, за винятком того, що він приймає функцію як його значення замість рядка, як це робить атрибут value. Це також пояснює, чому ви можете "використовувати лише один з них" - виклик window.onload перепризначає значення атрибуту onload для тегу body.
Крім того, як говорять інші, зазвичай, більш чітко зберігати стиль та javascript, відокремлені від вмісту сторінки, саме тому більшість людей радить використовувати window.onload або подібну функцію готовності jQuery.
<body onload = ""> повинен замінити window.onload.
З <body onload = "">, document.body.onload може бути нульовим, невизначеним або функцією в залежності від браузера (хоча 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. Але "це" буде вікном у веб-переглядачах.
Це означає, що, коли це має значення, ви повинні загортати сиру та робити речі послідовними або використовувати бібліотеку, яка робить це за вас.
Вони обидва працюють однаково. Однак зауважте, що якщо обидва визначені, буде запрошено лише один із них. Я взагалі уникаю використання будь-якого з них безпосередньо. Натомість ви можете приєднати обробник події до події завантаження. Таким чином, ви можете легше включити інші пакети JS, які також можуть потребувати приєднання зворотного дзвінка до події завантаження.
Будь-яка програма JS матиме крос-браузерні методи для обробників подій.
Це прийнятий стандарт, коли вміст, компонування та поведінка є окремими. Тож window.onload () буде більш підходящим для використання, ніж <body onload="">хоча обидва виконують одну і ту ж роботу.
Вибачте за реінкарнацію цієї теми знову ще через 3 роки сну, але , можливо , я , нарешті , знайшов безперечну перевагу window.onload=fn1;над <body onload="fn1()">. Це стосується модулів JS або модулів ES : коли ваш onloadобробник перебуває у "класичному" файлі JS (тобто посилається без <script type="module" … >, будь-який спосіб можливий; коли ваш onloadобробник перебуває у файлі JS "модуль" (тобто згаданий посилання <script type="module" … >, <body onload="fn1()">помилка з "fn1 () не визначено "помилка. Причина, можливо, в тому, що модулі ES не завантажуються до розбору HTML ..., але це лише моє здогадування. Як би там не було, window.onload=fn1;відмінно працює з модулями ...